https://github.com/halfzebra/react-infinite-range

∞ React Component for creating infinite range inputs
https://github.com/halfzebra/react-infinite-range

flow range-input react react-component

Last synced: 19 days ago
JSON representation

∞ React Component for creating infinite range inputs

• Host: GitHub
• URL: https://github.com/halfzebra/react-infinite-range
• Owner: halfzebra
• Created: 2018-08-17T13:59:18.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-22T21:56:40.000Z (about 6 years ago)
• Last Synced: 2025-01-07T13:01:30.749Z (about 1 month ago)
• Topics: flow, range-input, react, react-component
• Language: JavaScript
• Homepage:
• Size: 120 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ∞ react-infinite-range [![Build Status](https://travis-ci.org/halfzebra/react-infinite-range.svg?branch=master)](https://travis-ci.org/halfzebra/react-infinite-range) [![npm version](https://badge.fury.io/js/react-infinite-range.svg)](https://badge.fury.io/js/react-infinite-range)

React Component for creating infinite range inputs.



## API Docs

### ``

#### Usage

### [Uncontrolled](https://reactjs.org/docs/uncontrolled-components.html)

```js

import { InfiniteRange } from 'react-infinite-range'

// In your render:

  {props => }

```

### [Controlled](https://reactjs.org/docs/forms.html#controlled-components)

[InfiniteRange](/lib/InfiniteRange) owns the state of the input component and derives it from props. This is a design decision to hide implementation details from the consumer. Read more in [You Probably Don't Need Derived State](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html).

#### Props

##### children: (state: InfiniteRangeInputState & InfiniteRangeChildProps) => Element<*>

Required function.

##### floor: number

Lower boundary for the input, you might think of it as `min` for traditional HTML range input.

##### ceiling: number

Upper boundary for the input, you might think of it as `max` for traditional HTML range input.

##### step: number

An equivalent of `step` for traditional HTML range input.

##### chunkSize: number

##### onChange: (value: number) => void

##### onInput: (value: number) => void

##### defaultValue: number

##### value: number