react-number-selector

A number selector React component

Install

npm install --save react-number-selector

Intro

Usage

import React, { Component } from 'react'
 
import NumberSelector from 'react-number-selector'
import 'react-number-selector/dist/index.css'
 
class Example extends Component {
  render() {
    return <NumberSelector />
  }
}

NumberSelector accepts these props:

• values: array of widths to display (default: [1, 2, 3, 4, 5, 7, 9])
• selectedValue: the default selected element from values
• width: component width (default: 100)
• background: component's background colour (default: "#000000");
• colour: the texts' colour (default: "#00ff00")
• inputColour: the input field's text colour (default: same as "colour")
• hoverBorder: an element's border when hovering over it (default: no border)
• hoverBackground: an element's background when hovering over it (default: undefined)
• font: the text's font-family (default: "sans-serif")
• fontSize: the text's font size (CSS value; default: initial)
• opacity: the component's opacity (not the hovering opacity; CSS value, default: 1)
• onClick: a function that is called with a single argument, the value from values, when user clicks a hovered row
• onChange: a function that is called with the hovered over row when user hovers over a row (enters it)
• onInputChange: function that is called with a custom input value; if not provided, no input field will be shown; this is also called when the input box's focus is lost so the current value is passed on even if it wasn't changed

Develop

Watch and build bundle:

yarn start

In separate terminal run dev server:

cd example
yarn start

Run storybook:

yarn storybook

or

npm run storybook

License

MIT © okloecker