use-range

React hook to return a matching range (from a list of ranges) for a given value.

Install

npm install --save use-range

Usage

import React, { useState } from 'react'

import useRange from 'use-range'

const myRanges = [
    {
        id: 'very_low',
        min: -100,
        title: 'Very Low',
    },
    {
        id: 'low',
        min: 100,
        title: 'Low',
    },
    {
        id: 'medium',
        min: 150,
        title: 'Medium',
    },
    {
        id: 'high',
        min: 350,
        title: 'High',
    },
    {
        id: 'very_high',
        min: 450,
        max: 500,
        title: 'Very High',
    },
]

const Example = () => {
    const [valueInput, setValueInput] = useState(0)
    const { range, rangeIndex, setValue } = useRange(myRanges)
    return (
        <div>
            <div>
                Value: <input value={valueInput} onChange={(evt) => setValueInput(evt.target.value)} />
            </div>
            {range ? <div>Current range is: {range.title}</div> : <div>Out of range</div>}
        </div>
    )
}

License

MIT © samirdamle

This hook is created using create-react-hook.