input-to-range v1.0.5
Description
The InputToRange component
Created as a helper for configurations steps in different apps, for example you may have a e-book app where the author can configure his book chapters:
Chapter 1: 1-10
(1 to 10 pages)
Chapter 2: 11-76
(11 to 76 pages)
etc...
Click here for the demo: InputToRange demo on firebase
Installation
Distributed via npm which is bundled with node and should be installed as one of your project's dependencies:
npm install --save input-to-range
This package also depends on react and react-dom. Please make sure you have those installed as well.
Usage
import React from 'react';
import { InputToRange } from 'input-to-range';
function App() {
const [labels, setLabels] = useState(['10-30', '150-170']);
return (
<div>
<InputToRange
labels={labels}
onChange={ev => {
console.log(ev.labels); // labels
console.log(ev.ranges); // ranges
}}
/>
</div>
);
}
Development
In the project directory, you can run:
npm run build
-> runs tests and creates the build
npm run test
-> runs tests
npm run watch
-> watches over files for development
Properties and Events
labels
array of number or strings like discribed above
This is useful if you want to start with default values
hideLabels
boolean
Show/Hide the built in labels
ignoreDefaultStyles
boolean
If set on true no default styles will be applied
onChange
function
When you create a new label it will call this function with a property of this type:
{ labels: '100', '101-103', ranges: [100, 101,102,103] }
BUGS
@TODO -> props that need implementation
allowIntersection
// don't allow duplicates inside the 2d arrays
onlyPossitiveNumbers
// allow only positive numbers
onlyNegativeNumbers
// allow only positive numbers
keys
// override the existing keys SPACE and ENTER
Click here for the demo: InputToRange demo on firebase
LICENSE
MIT