Skip to content
This repository has been archived by the owner on Sep 1, 2023. It is now read-only.

chore(readme): Improve props overview and examples #73

Merged
merged 1 commit into from
Jan 24, 2020
Merged

chore(readme): Improve props overview and examples #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
### Security
### Misc
* Readme: Improve props overview and examples

## [1.0.2] - 2020-01-14
### Removed
Expand Down
46 changes: 27 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
2. [Installation](#installation)
3. [Usage](#usage)
4. [Configuration](#configuration)
5. [Contribution](#contribution)
5. [More Examples](#more-examples)
6. [Contribution](#contribution)

## General

Expand Down Expand Up @@ -55,19 +56,33 @@ You can also use Typescript as the package contains type definitions.

The slider currently provides the following interface:

| Name | Type | Default |Description |
| -------------------- | ------------- | ----- | -----------------------------------------------------:|
| activeIndex | number | 0 | Controlles the shown index |
| ArrowComponent | function | - | A custom component for the arrows |
| auto | number | 0 | 0 = disabled auto sliding. Indicates the pausing time in milliseconds per slide before next slide is shown. |
| BulletComponent | function | - | A custom component for the bullets |
| bulletStyle | object | { } | custom styles for the bullets |
| children | node | [ ] | The children of the slider, every child is a single slide |
| hasArrows | boolean | false | Whether the slider should have arrows or not |
| hasBullets | boolean | false | Whether the slider should have bullets or not |
| onSlideChange | function | - | Callback which is triggered when the slides changed either manually or automatically |



## More examples

### Custom bulletStyle
```js
activeIndex: PropTypes.number, // the index to show, can be controlled
ArrowComponent: PropTypes.func, // a custom component for the arrows
arrowStyle: PropTypes.objectOf(PropTypes.string), // custom styles for the arrows
auto: PropTypes.number, // this number indicates the speed when the slider should be slide to next slide (milliseconds)
BulletComponent: PropTypes.func, // a custom component for the bullets
bulletStyle: PropTypes.objectOf(PropTypes.string), // custom styles for the bullets
children: PropTypes.node, // the children of the slider, every child is a single slide
hasBullets: PropTypes.bool, // whether the slider should have bullets or not
onSlideChange: PropTypes.func // a callback which is triggered when the slides changed either manually or automatically
<Slider hasBullets bulletStyle={{backgroundColor: '#fff'}}>
<MySlide />
<MySlide />
<MySlide />
</Slider>
```

Some option examples:
### Fully customized

```js
import Slider from '@farbenmeer/react-spring-slider';

Expand Down Expand Up @@ -130,14 +145,7 @@ const App = () => {
}
```

Only a different bulletStyle:
```js
<Slider hasBullets bulletStyle={{backgroundColor: '#fff'}}>
<MySlide />
<MySlide />
<MySlide />
</Slider>
```
For more examples have a look at [storybook](https://farbenmeer.github.io/react-spring-slider/).

## Contribution

Expand Down