Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thanhtunguet/react-native-expandable-slider
Expandable Slider for React Native
https://github.com/thanhtunguet/react-native-expandable-slider
Last synced: 23 days ago
JSON representation
Expandable Slider for React Native
- Host: GitHub
- URL: https://github.com/thanhtunguet/react-native-expandable-slider
- Owner: thanhtunguet
- License: mit
- Created: 2021-02-26T09:33:54.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-12-04T15:24:55.000Z (about 3 years ago)
- Last Synced: 2024-11-11T13:57:58.371Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-expandable-slider
- Size: 863 KB
- Stars: 2
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-expandable-slider
_Phillips Hue dimming slider_
## Installation
```sh
npm install react-native-expandable-slider
```
## Usage
View [Online Demo](https://snack.expo.io/@thanhtunguet/react-native-expandable-slider) Snack
If you place this component inside ScrollView, please set `canCancelContentTouches={false}` for ScrollView container
See [https://stackoverflow.com/questions/51705343/react-native-using-a-panresponder-inside-of-a-scrollview-broken-on-android](https://stackoverflow.com/questions/51705343/react-native-using-a-panresponder-inside-of-a-scrollview-broken-on-android)
```tsx
import ExpandableSlider from 'react-native-expandable-slider';
function Example() {
return (
);
}
```
### Props
```tsx
interface ExpandableSliderProps {
/**
* Size of the slider indicator (px)
*
* @type {number}
*/
indicatorSize?: number;
/**
* Min value the slider will emit
*
* @type {number}
*/
min?: number;
/**
* Max value the slider will emit
*
* @type {number}
*/
max?: number;
/**
* Current value to display
*
* @type {number}
*/
value?: number;
/**
* The slider outer style
*
* @type {StyleProp}
*/
style?: ViewProps['style'];
/**
* Trigger a haptic response when user touch the slider
*
* @type {boolean}
*/
useHapticResponse?: boolean;
/**
* A mutable ref object of type number,
* let the slider know how wide it will expand
*/
heightRef?: MutableRefObject;
/**
* Emit new value while sliding
*
* @type {(value: number) => (void | Promise)}
*/
onSlide?: OnSliderChange;
/**
* Emit new value when sliding completed
*
* @type {(value: number) => (void | Promise)}
*/
onSlideCompleted?: OnSliderChange;
/**
* Velocity of the slider animation
*/
slidingVelocity?: number;
/**
* Slider's height animated duration
*/
heightAnimatedDuration?: number;
}
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT