Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yotamberk/react-angle-range
try it out:
https://github.com/yotamberk/react-angle-range
Last synced: 3 months ago
JSON representation
try it out:
- Host: GitHub
- URL: https://github.com/yotamberk/react-angle-range
- Owner: yotamberk
- Created: 2020-04-20T06:29:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-04-26T17:22:22.000Z (9 months ago)
- Last Synced: 2024-04-26T21:32:15.327Z (9 months ago)
- Language: JavaScript
- Homepage: https://yotamberk.github.io/react-angle-range/
- Size: 882 KB
- Stars: 5
- Watchers: 1
- Forks: 4
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-angle-range
> a react angle range picker
[](https://www.npmjs.com/package/react-angle-range) [](https://standardjs.com)
## Try it yourself
[DEMO](https://yotamberk.github.io/react-angle-range/)
## Install
via npm:
```bash
npm install --save react-angle-range
```
via yarn:
```bash
yarn add react-angle-range
```
## Usage
```jsx
import React, { Component } from 'react';
import AngleRange from 'react-angle-range';
class Example extends Component {
render() {
return (
{}}
// optional
isDisabled = {false}
limitFrom = {null} // { min: , max: }
limitTo = {null} // { min: , max: }
radius = {150}
handlerRangeRadiusOffset = {30}
handlerRadius = {10}
offsetHandlerRadius = {10}
offsetHandlerRadiusOffset = {10}
min = {0}
max = {359}
isQuarterCircle = {false}
/>
)
}
}
```
## Params
### Required
- #### value : { from: `number`[`degress`], to: `number`[`degress`] }
The value is the controlled range given by the parent components.
Notice that the numbers will be considered as degrees (and not as radiants) and are between 0 to 360.
- #### onChange : `funcion({ from, to })`
The function receives `{ from, to }` as its arument as calculated from the picker.
### Optional
- #### isDisabled : `boolean` (default: `false`)
Controls whether the controller is disabled or enabled. When the controller is disabled, handles are not draggable.
- #### limitFrom : { min: `number`[`degress`], max: `number`[`degress`] } (default: `null`)
Limit the `value.from` handler to a range of degrees between the `min` angle to the `max` angle.
Notice that if the `value.from` is not in the range between `min` and `max`, the handler will not usable.
- #### limitTo : { min: `number`[`degress`], max: `number`[`degress`] } (default: `null`)
Limit the `value.to` handler to a range of degrees between the `min` angle to the `max` angle.
Notice that if the `value.to` is not in the range between `min` and `max`, the handler will not usable.
- #### radius : `number`[`px`] (default: `150`)
Radius of the full range.
- #### handlerRangeRadiusOffset : `number`[`px`] (default: `30`)
Distance of the angle handler from the full range.
- #### handlerRadius : `number`[`px`] (default: `10`)
Radius of the angle handler.
- #### offsetHandlerRadius : `number`[`px`] (default: `10`)
Distance of the offset handlers from the full range.
- #### offsetHandlerRadius : `number`[`px`] (default: `10`)
Radius of the offset handlers.
- #### offsetHandlerRadiusOffset : `number`[`px`] (default: `30`)
Distance of the offset handlers from the full range.
- #### min : `number`[`degress`] (default: `0`)
Minimal value for the range (minimal `value.from`).
- #### max : `number`[`degress`] (default: `359`)
Maximal value for the range (minimal `value.from`).
- #### isQuarterCircle : `boolean` (default: `false`)
Create a full range of only 0 until 90 degrees.
The range will be the top-right range.
### classes
All the styles of the internal components are configurable via the next names.
- root
- rootBoundaries
- fullRange
- relativeAxis
- axisCenter
- centerAngleHandler
- offsetAngleHandler
- offsetsSegment
- offsetsSegmentRemove
## License
MIT © [yotamberk](https://github.com/yotamberk)