Skip to content

Commit

Permalink
docs: ✏️ update readme
Browse files Browse the repository at this point in the history
Added API documentation
  • Loading branch information
samAbeywickrama committed Aug 17, 2019
1 parent f0dd312 commit 2a8f398
Showing 1 changed file with 108 additions and 3 deletions.
111 changes: 108 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,114 @@ Please visit this [Repo](https://github.com/samAbeywickrama/roc-examples) for ex

## API

| Prop | Type | Default | Required | Description |
| ------------ | -------- | ------- | -------- | ----------------------------------- |
| wrapperClass | `String` | none | no | className name for wrapper element. |
### ReactOffcanvasComponent

| Prop | Type | Default | Required | Description |
| ---------------- | --------- | ------------------------------ | -------- | ----------------------------------------------------------------------------- |
| open | `Boolean` | `false` | yes | Setting values as `true` will Reveal Sidebar and `false` will Hide Sidebar |
| className | `String` | no | no | Override the styles applied to the component with css |
| style | `Object` | no | no | Override the styles applied to the component with inline styles |
| openAnimation | `Object` | [See Default Animations](#roc) | no | Override the default open animation |
| closeAnimation | `Object` | [See Default Animations](#roc) | no | Override the default close animation |
| overlay | `Boolean` | false | no | Show / Hide background overlay |
| overlayClassName | `String` | no | no | Override the default styles applied to the Overlay component with css classes |

### AnimatedPanel

| Prop | Type | Default | Required | Description |
| -------------- | -------- | ----------------------------- | -------- | --------------------------------------------------------------- |
| className | `String` | no | no | Override the styles applied to the component with css |
| style | `Object` | no | no | Override the styles applied to the component with inline styles |
| openAnimation | `Object` | [See Default Animations](#ap) | no | Override the default open animation |
| closeAnimation | `Object` | [See Default Animations](#ap) | no | Override the default close animation |

### CloseButton

| Prop | Type | Default | Required | Description |
| ------- | ---------- | ------- | -------- | --------------------------------------------------------------- |
| onClick | `Function` | no | no | `function(event: object) => void` |
| style | `Object` | no | no | Override the styles applied to the component with inline styles |

### DropdownMenu

| Prop | Type | Default | Required | Description |
| --------- | -------- | ------- | -------- | --------------------------------------------------------------- |
| style | `Object` | no | no | Override the styles applied to the component with inline styles |
| className | `String` | no | no | Override the styles applied to the component with css |

### DropdownMenu

| Prop | Type | Default | Required | Description |
| --------- | -------- | ------- | -------- | ----------------------------------------------------- |
| className | `String` | no | no | Override the styles applied to the component with css |

### MenuItem

| Prop | Type | Default | Required | Description |
| --------------------- | ---------- | ------- | -------- | ----------------------------------------------------------------- |
| style | `Object` | no | no | Override the styles applied to the component with inline styles |
| className | `String` | no | no | Override the styles applied to the component with css |
| onClick | `Function` | no | no | `function(event: object) => void` |
| dropdownIconClassName | `String` | no | no | Override the styles applied to the dropdown menu icon with css |
| hasDropdown | `Boolean` | no | no | If the MenuItem contains a dropdown menu set this value to `true` |

### Default Animations

#### [ReactOffcanvasComponent](#roc)

**Open**

```js
{
x: "-100px",
transition: {
ease: [0.175, 0.885, 0.32, 1.275],
duration: 300
},
delayChildren: 150,
staggerChildren: 100
}
```

**Close**

```js
{
x: "-100%",
transition: {
duration: 100
},
afterChildren: true
}
```

#### [AnimatedPanel](#ap)

**Open**

```js
{
x: "0%",
transition: {
ease: [0.175, 0.885, 0.32, 1.275],
duration: 300
},
delayChildren: 300,
staggerChildren: 100
}
```

**Close**

```js
{
x: "-100%",
transition: {
duration: 100
},
afterChildren: true
}
```

#### Todo:

Expand Down

0 comments on commit 2a8f398

Please sign in to comment.