Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rnheroes/react-native-ruler-picker
⚡ Lightning-fast and customizable Ruler Picker component for React Native
https://github.com/rnheroes/react-native-ruler-picker
picker react react-native react-native-picker react-native-ruler react-native-ruler-picker reactnative ruler
Last synced: 5 days ago
JSON representation
⚡ Lightning-fast and customizable Ruler Picker component for React Native
- Host: GitHub
- URL: https://github.com/rnheroes/react-native-ruler-picker
- Owner: rnheroes
- License: mit
- Created: 2023-03-16T13:00:28.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-02T21:57:36.000Z (12 months ago)
- Last Synced: 2025-01-30T22:42:03.843Z (12 days ago)
- Topics: picker, react, react-native, react-native-picker, react-native-ruler, react-native-ruler-picker, reactnative, ruler
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-ruler-picker
- Size: 1.14 MB
- Stars: 106
- Watchers: 2
- Forks: 12
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-ruler-picker
[](https://www.npmjs.com/package/react-native-ruler-picker) [](http://hits.dwyl.com/rnheroes/react-native-ruler-picker)
⚡ Lightning-fast and customizable Ruler Picker component for React Native
## Installation
1. Ensure sure you've installed [flash-list](https://github.com/Shopify/flash-list)
2. `yarn add react-native-ruler-picker` or `npm install react-native-ruler-picker`
## Usage
```js
import { RulerPicker } from 'react-native-ruler-picker';
console.log(number)}
onValueChangeEnd={(number) => console.log(number)}
unit="cm"
/>;
```
## Props
| Name | Type | Required | Default Value | Description |
| ---------------- | ---------------------------- | -------- | ------------- | ---------------------------------------- |
| width | number | No | windowWidth | Width of the ruler picker |
| height | number | No | 500 | Height of the ruler picker |
| min | number | Yes | - | Minimum value of the ruler picker |
| max | number | Yes | - | Maximum value of the ruler picker |
| step | number | No | 1 | Step of the ruler picker |
| initialValue | number | No | min | Initial value of the ruler picker |
| fractionDigits | number | No | 1 | Number of digits after the decimal point |
| unit | string | No | 'cm' | Unit of the ruler picker |
| indicatorHeight | number | No | 80 | Height of the indicator |
| indicatorColor | string | No | 'black' | Color of the center line |
| valueTextStyle | RulerPickerTextProps | No | - | Text style of the value |
| unitTextStyle | RulerPickerTextProps | No | - | Text style of the unit |
| decelerationRate | 'fast' \| 'normal' \| number | No | 'normal' | Deceleration rate of the ruler picker |
| onValueChange | (value: string) => void | No | - | Callback when the value changes |
| onValueChangeEnd | (value: string) => void | No | - | Callback when the value changes end |
| gapBetweenSteps | number | No | 10 | Gap between steps |
| shortStepHeight | number | No | 20 | Height of the short step |
| longStepHeight | number | No | 40 | Height of the long step |
| stepWidth | number | No | 2 | Width of the steps |
| shortStepColor | string | No | 'lightgray' | Color of the short steps |
| longStepColor | string | No | 'darkgray' | Color of the long steps |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)