Skip to content

Commit

Permalink
docs: Update README examples to remove semicolons
Browse files Browse the repository at this point in the history 
Closes #265
  • Loading branch information
@iRoachie
iRoachie committed Dec 10, 2018
1 parent bff3bfe commit dd571ed
Showing 1 changed file with 32 additions and 26 deletions.
58 changes: 32 additions & 26 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,52 @@ Pure JavaScript, supports dynamic content heights and components that is aware o

## Installation

```
```bash
npm install --save react-native-collapsible
```

## Collapsible Usage

```js
import Collapsible from 'react-native-collapsible';
<Collapsible collapsed={isCollapsed}>
<SomeCollapsedView />
</Collapsible>;

() => (
<Collapsible collapsed={isCollapsed}>
<SomeCollapsedView />
</Collapsible>
);
```

## Properties

| Prop | Description | Default |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| **`align`** | Alignment of the content when transitioning, can be `top`, `center` or `bottom` | `top` |
| **`collapsed`** | Whether to show the child components or not | `true` |
| **`collapsedHeight`** | Which height should the component collapse to | `0` |
| **`enablePointerEvents`** | Enable pointer events on collapsed view | `false` |
| **`duration`** | Duration of transition in milliseconds | `300` |
| **`easing`** | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | `easeOutCubic` |
| **`style`** | Optional styling for the container | |
| **`onAnimationEnd`** | Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation | `() => {}` |
| Prop | Description | Default |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| **`align`** | Alignment of the content when transitioning, can be `top`, `center` or `bottom` | `top` |
| **`collapsed`** | Whether to show the child components or not | `true` |
| **`collapsedHeight`** | Which height should the component collapse to | `0` |
| **`enablePointerEvents`** | Enable pointer events on collapsed view | `false` |
| **`duration`** | Duration of transition in milliseconds | `300` |
| **`easing`** | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | `easeOutCubic` |
| **`style`** | Optional styling for the container | |
| **`onAnimationEnd`** | Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation | `() => {}` |

## Accordion Usage

This is a convenience component for a common use case, see demo below.

```js
import Accordion from 'react-native-collapsible/Accordion';
<Accordion
activeSections={[0]}
sections={['Section 1', 'Section 2', 'Section 3']}
renderSectionTitle={this._renderSectionTitle}
renderHeader={this._renderHeader}
renderContent={this._renderContent}
onChange={this._updateSections}
/>;

() => (
<Accordion
activeSections={[0]}
sections={['Section 1', 'Section 2', 'Section 3']}
renderSectionTitle={this._renderSectionTitle}
renderHeader={this._renderHeader}
renderContent={this._renderContent}
onChange={this._updateSections}
/>
);
```

## Properties
Expand Down Expand Up @@ -86,17 +92,17 @@ import Accordion from 'react-native-collapsible/Accordion';
const SECTIONS = [
{
title: 'First',
content: 'Lorem ipsum...'
content: 'Lorem ipsum...',
},
{
title: 'Second',
content: 'Lorem ipsum...'
}
content: 'Lorem ipsum...',
},
];

class AccordionView extends Component {
state = {
activeSections: []
activeSections: [],
};

_renderSectionTitle = section => {
Expand Down

0 comments on commit dd571ed

Please sign in to comment.