Socket
Socket
Sign inDemoInstall

react-ranger

Package Overview
Dependencies
7
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.5 to 2.0.0

dist/react-ranger.development.js
dist/react-ranger.development.js.map
dist/react-ranger.min.mjs
dist/react-ranger.min.mjs.map
dist/react-ranger.mjs
dist/react-ranger.mjs.map
dist/react-ranger.production.min.js
dist/react-ranger.production.min.js.map
index.js
scripts/postinstall.js

118

package.json
{
"name": "react-ranger",
"version": "1.0.5",
"description": "A render-prop component to build range and multi-range sliders in React",
"main": "lib/index.js",
"module": "es/index.js",
"version": "2.0.0",
"description": "Hooks for building range and multi-range sliders in React",
"author": "tannerlinsley",
"license": "MIT",
"repository": "tannerlinsley/react-ranger",
"homepage": "https://github.com/tannerlinsley/react-ranger#readme",
"main": "index.js",
"module": "dist/react-ranger.mjs",
"sideEffects": false,
"scripts": {
"test": "is-ci \"test:ci\" \"test:dev\"",
"test:dev": "jest --watch",
"test:ci": "jest",
"test:coverage": "yarn test:ci; open coverage/lcov-report/index.html",
"build": "NODE_ENV=production rollup -c",
"now-build": "yarn && cd www && yarn && yarn build",
"start": "rollup -c -w",
"prepare": "yarn build",
"prepublishOnly": "yarn test:ci && yarn formatReadme",
"release": "yarn publish",
"releaseNext": "yarn publish --tag next",
"format": "prettier {src,src/**,example/src,example/src/**}/*.{md,js,jsx,tsx} --write",
"formatReadme": "yarn doctoc",
"doctoc": "npx doctoc --maxlevel 2 README.md",
"jump2header": "npx @strdr4605/jump2header --header 'documentation' --start 'Installation' -e 2 --silent -l 2",
"stats": "open ./stats.html",
"postinstall": "node ./scripts/postinstall.js || exit 0"
},
"files": [
"css",
"es",
"lib",
"umd"
"dist",
"scripts"
],
"author": "Tanner Linsley <tannerlinsley@gmail.com>",
"homepage": "https://react-ranger.js.org",
"license": "MIT",
"keywords": [
"react-ranger",
"slider",
"range",
"input",
"react"
],
"repository": {
"type": "git",
"url": "git+https://github.com/react-tools/react-ranger.git"
"dependencies": {
"@scarf/scarf": "^1.0.0"
},
"scripts": {
"build": "nwb build-react-component",
"clean": "nwb clean-module && nwb clean-demo",
"start": "nwb serve-react-demo",
"test": "nwb test-react",
"test:coverage": "nwb test-react --coverage",
"test:watch": "nwb test-react --server",
"prepublishOnly": "yarn build",
"postPublish": "git push --tags"
},
"peerDependencies": {
"react": "15 || 16"
"react": "^16.6.3"
},
"devDependencies": {
"babel-plugin-source": "^0.0.2",
"babel-preset-env": "^1.7.0",
"eslint-config-react-tools": "^1.0.10",
"nwb": "0.18.x",
"prop-types": "^15.6.0",
"react": "^15.6.1 || 16",
"react-dom": "^15.6.1 || 16",
"styled-components": "^2.2.3"
"@babel/core": "^7.8.6",
"@babel/preset-env": "^7.8.6",
"@babel/preset-react": "^7.8.3",
"@rollup/plugin-replace": "^2.3.1",
"@svgr/rollup": "^4.3.0",
"@testing-library/react": "^9.4.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.x",
"babel-jest": "^24.9.0",
"babel-plugin-transform-async-to-promises": "^0.8.15",
"cross-env": "^5.1.4",
"eslint": "5.x",
"eslint-config-prettier": "^4.3.0",
"eslint-config-react-app": "^4.0.1",
"eslint-config-standard": "^12.0.0",
"eslint-config-standard-react": "^7.0.2",
"eslint-plugin-flowtype": "2.x",
"eslint-plugin-import": "2.x",
"eslint-plugin-jsx-a11y": "6.x",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-react": "7.18.3",
"eslint-plugin-react-hooks": "1.5.0",
"eslint-plugin-standard": "^4.0.0",
"is-ci-cli": "^2.0.0",
"jest": "^24.9.0",
"prettier": "^1.19.1",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-error-boundary": "^2.2.1",
"rollup": "^1.32.0",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-commonjs": "^10.0.0",
"rollup-plugin-jscc": "^1.0.0",
"rollup-plugin-node-resolve": "^5.0.0",
"rollup-plugin-peer-deps-external": "^2.2.2",
"rollup-plugin-prettier": "^0.6.0",
"rollup-plugin-size": "^0.2.2",
"rollup-plugin-terser": "^5.2.0",
"rollup-plugin-visualizer": "^4.0.4"
},
"dependencies": {
"raf": "^3.4.0"
}
"release": {}
}

378

README.md

@@ -1,48 +0,147 @@

<!-- <a href="https://travis-ci.org/react-tools/react-ranger" target="\_parent">
<img alt="" src="https://travis-ci.org/react-tools/react-ranger.svg?branch=master" />
</a> -->
![React Ranger Header](https://github.com/tannerlinsley/react-ranger/raw/master/media/header.png)
<a href="https://spectrum.chat/react-ranger">
<img alt="Join the community on Spectrum" src="https://withspectrum.github.io/badge/badge.svg" />
<img src='https://github.com/tannerlinsley/react-ranger/raw/master/media/logo.png' width='300'/>
Hooks for building range and multi-range sliders in React
<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
<img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
</a><a href="https://github.com/tannerlinsley/react-ranger/actions?query=workflow%3A%22react-ranger+tests%22">
<img src="https://github.com/tannerlinsley/react-ranger/workflows/react-ranger%20tests/badge.svg" />
</a><a href="https://npmjs.com/package/react-ranger" target="\_parent">
<img alt="" src="https://img.shields.io/npm/dm/react-ranger.svg" />
</a><a href="https://bundlephobia.com/result?p=react-ranger@latest" target="\_parent">
<img alt="" src="https://badgen.net/bundlephobia/minzip/react-ranger@latest" />
</a><a href="#badge">
<img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
</a><a href="https://github.com/tannerlinsley/react-ranger/discussions">
<img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
</a><a href="https://github.com/tannerlinsley/react-ranger" target="\_parent">
<img alt="" src="https://img.shields.io/github/stars/tannerlinsley/react-ranger.svg?style=social&label=Star" />
</a><a href="https://twitter.com/tannerlinsley" target="\_parent">
<img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
</a>
<a href="https://npmjs.com/package/react-ranger" target="\_parent">
<img alt="" src="https://img.shields.io/npm/dm/react-ranger.svg" />
</a>
<a href="https://github.com/react-tools/react-ranger" target="\_parent">
<img alt="" src="https://img.shields.io/github/stars/react-tools/react-ranger.svg?style=social&label=Star" />
</a>
<a href="https://twitter.com/tannerlinsley" target="\_parent">
<img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
</a>
<br />
<br />
Enjoy this library? Try them all! [React Table](https://github.com/tannerlinsley/react-table), [React Form](https://github.com/tannerlinsley/react-form), [React Charts](https://github.com/tannerlinsley/react-charts)
# React Ranger 🎛
## Quick Features
A headless render-prop component for building range and multi-range sliders in React
- Headless!
- Single or Multiple Handles
- Handle Devider Items
- Custom Steps or Step-Size
- Custom Ticks
- <a href="https://bundlephobia.com/result?p=react-ranger@latest" target="\_parent">
<img alt="" src="https://badgen.net/bundlephobia/minzip/react-ranger@latest" />
</a>
- 2kb gzipped. Wow!
- Render-Prop pattern allows you to render and style the slider however you want.
<!-- ## Used By
- Coming Soon! -->
> _These analytics are made available via the awesome [Scarf](https://www.npmjs.com/package/@scarf/scarf) package analytics library_
## Examples
- [Codesandbox.io](https://codesandbox.io/s/l5nnjl7jqm) (contains all examples below)
- Simple
- Custom Components
- Multi-Range
- Custom Steps
- Basic - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-ranger/tree/master/examples/basic) - [Source](./examples/basic)
- Multi-Range - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-ranger/tree/master/examples/multi-range) - [Source](./examples/multi-range)
- Custom Steps - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-ranger/tree/master/examples/custom-steps) - [Source](./examples/custom-steps)
- Custom Styles - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-ranger/tree/master/examples/custom-styles) - [Source](./examples/custom-styles)
- Update On Drag - [CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-ranger/tree/master/examples/update-on-drag) - [Source](./examples/update-on-drag)
## Chat with us on Spectrum!
## Sponsors
Need Help? [Click here to sign up for the React-Tools Spectrum community](https://spectrum.chat/react-ranger). We are constantly discussing implementation details and answering questions. :)
This library is being built and maintained by me, @tannerlinsley and I am always in need of more support to keep projects like this afloat. If you would like to get premium support, add your logo or name on this README, or simply just contribute to my open source Sponsorship goal, [visit my Github Sponsors page!](https://github.com/sponsors/tannerlinsley/)
## Installation
[![Diamond Sponsors](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/diamond.png)](https://github.com/sponsors/tannerlinsley)
<table>
<tbody>
<tr>
<td>
<a href="https://github.com/sponsors/tannerlinsley" target="_blank">
Get Your Logo Here!
</a>
</td>
</tr>
</tbody>
</table>
[![Gold Sponsors](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/gold.png)](https://github.com/sponsors/tannerlinsley)
<table>
<tbody>
<tr>
<td>
<a href="https://github.com/sponsors/tannerlinsley" target="_blank">
Get Your Logo Here!
</a>
</td>
</tr>
</tbody>
</table>
[![Silver Sponsors](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/silver.png)](https://github.com/sponsors/tannerlinsley)
<table>
<tbody>
<tr>
<td>
<a href="https://github.com/sponsors/tannerlinsley" target="_blank">
Get Your Logo Here!
</a>
</td>
</tr>
</tbody>
</table>
[![Bronze Sponsors](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/bronze.png)](https://github.com/sponsors/tannerlinsley)
<table>
<tbody>
<tr>
<td>
<a href="https://nozzle.io" target="_blank">
<img width='150' src="https://nozzle.io/img/logo-blue.png">
</a>
</td>
</tr>
</tbody>
</table>
[![Supporters](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/supporters.png)](https://github.com/sponsors/tannerlinsley)
- Get your [name and link](#) here!
[![Fans](https://raw.githubusercontent.com/tannerlinsley/files/master/sponsorships/fans.png)](https://github.com/sponsors/tannerlinsley)
- Get your name here!
### [Become a Sponsor](https://github.com/sponsors/tannerlinsley/)
# Documentation
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
- [Installation](#installation)
- [Sample Usage](#sample-usage)
- [Options](#options)
- [Returns](#returns)
- [Interpolation](#interpolation)
- [Contributors ✨](#contributors-)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
# Installation
```bash
$ npm i --save react-ranger
# or
$ yarn add react-ranger
# or
$ npm install --save react-ranger
```
React Ranger uses [Scarf](https://www.npmjs.com/package/@scarf/scarf) to collect anonymized installation analytics. These analytics help support the maintainers of this library. However, if you'd like to opt out, you can do so by setting `scarfSettings.enabled = false` in your project's `package.json`. Alternatively, you can set the environment variable `SCARF_ANALYTICS=false` before you install.
## Sample Usage

@@ -53,92 +152,161 @@

```javascript
import ReactRanger from "react-ranger";
import ReactRanger from 'react-ranger'
class SimpleExample extends React.Component {
state = {
value: 5
};
render() {
const { value } = this.state;
return (
<ReactRanger
min={0}
max={100}
stepSize={5}
value={value}
onChange={value =>
this.setState({
value
})
}
function App() {
const [values, setValues] = React.useState([10])
const { getTrackProps, handles } = useRanger({
values,
onChange: setValues,
min: 0,
max: 100,
stepSize: 5,
})
return (
<>
<div
{...getTrackProps({
style: {
height: '4px',
background: '#ddd',
boxShadow: 'inset 0 1px 2px rgba(0,0,0,.6)',
borderRadius: '2px',
},
})}
>
{({ getTrackProps, handles }) => (
{handles.map(({ getHandleProps }) => (
<div
{...getTrackProps({
{...getHandleProps({
style: {
height: "4px",
background: "#ddd",
boxShadow: "inset 0 1px 2px rgba(0,0,0,.6)",
borderRadius: "2px"
}
width: '12px',
height: '12px',
borderRadius: '100%',
background: 'linear-gradient(to bottom, #eee 45%, #ddd 55%)',
border: 'solid 1px #888',
},
})}
>
{handles.map(({ value, active, getHandleProps }) => (
<div
{...getHandleProps({
style: {
width: "12px",
height: "12px",
borderRadius: "100%",
background:
"linear-gradient(to bottom, #eee 45%, #ddd 55%)",
border: "solid 1px #888"
}
})}
/>
))}
</div>
)}
</ReactRanger>
);
}
/>
))}
</div>
</>
)
}
```
## Props
## Options
- `children: func.isRequired` A Function as a child that receives the following props:
- `getTrackProps(userProps): func` - A function that takes optional props and returns the combined necessary props for the track component.
- `ticks: array` - Ticks to be rendered. Each `tick` has the following props:
- `value: number` - The tick number to be displayed
- `getTickProps(userProps): func` - A function that take optional props and returns the combined necessary props for the tick component.
- `segments: array` - Segments to be rendered. Each `segment` has the following props:
- `value: number` - The segments ending value
- `getSegmentProps(userProps): func` - A function that take optional props and returns the combined necessary props for the segment component.
- `handles: array` - Handles to be rendered. Each `handle` has the following props:
- `value: number` - The current value for the handle
- `active: boolean` - Denotes if the handle is currently being dragged.
- `getHandleProps(userProps): func` - A function that take optional props and returns the combined necessary props for the handle component.
- `activeHandleIndex: oneOfType([null, number])` - The zero-based index of the handle that is currently being dragged, or `null` if no handle is being dragged.
- `min: number.isRequired` - The minimum limit for the range
- `max: number.isRequired` - The maximum limit for the range
- `value: oneOfType([number, arrayOf(number)]).isRequired` - The current value (or values) for the range
- `stepSize: number.isRequired` - The distance between selectable steps
- `value: Array<number>` - The current value (or values) for the range
- **Required**
- `min: number` - The minimum limit for the range
- **Required**
- `max: number` - The maximum limit for the range
- **Required**
- `stepSize: number` - The distance between selectable steps
- **Required**
- `steps: arrayOf(number)` - An array of custom steps to use. This will override `stepSize`,
- `tickSize: number`
- `ticks: arrayOf(number): Default: 10` - An array of custom ticks to use. This will override `tickSize`,
- `onChange: func` - A function that is called with the following parameters:
- `newValue` - The new value or values for the range
- `onTrackClick: func` - A function that is called when the tracked is clicked with the following parameters:
- `stepValue` - The value that was clicked, but rounded to the nearest step.
- `preciseValue` - The value that was clicked, with decimal precision.
- `onPress: func` - A function that is called when a handle is pressed.
- `onDrag: func` - A function that is called when a handled is dragged.
- `onRelease: func` - A function that is called when a handle is released.
- `onChange: Function(newValue)` - A function that is called when the handle is released
- `onDrag: Function(newValue)` - A function that is called when a handled is dragged
- `interpolator: { getPercentageForValue: Function(value) => decimal, getValueForClientX: Function(x) => value}`
- The Interpolator to use
- Defualts to the ``
See [Interpolation](#Interpolation)
## Contributing
## Returns
We are always looking for people to help us grow `react-ranger`'s capabilities and examples. If you have an issue, feature request, or pull request, let us know!
- `getTrackProps(userProps): func` - A function that takes optional props and returns the combined necessary props for the track component.
- `ticks: array` - Ticks to be rendered. Each `tick` has the following props:
- `value: number` - The tick number to be displayed
- `getTickProps(userProps): func` - A function that take optional props and returns the combined necessary props for the tick component.
- `segments: array` - Segments to be rendered. Each `segment` has the following props:
- `value: number` - The segments ending value
- `getSegmentProps(userProps): func` - A function that take optional props and returns the combined necessary props for the segment component.
- `handles: array` - Handles to be rendered. Each `handle` has the following props:
- `value: number` - The current value for the handle
- `active: boolean` - Denotes if the handle is currently being dragged.
- `getHandleProps(userProps): func` - A function that take optional props and returns the combined necessary props for the handle component.
- `activeHandleIndex: oneOfType([null, number])` - The zero-based index of the handle that is currently being dragged, or `null` if no handle is being dragged.
## License
## Interpolation
React Ranger uses the MIT license. For more information on this license, [click here](https://github.com/react-tools/react-ranger/blob/master/LICENSE).
By default, `react-ranger` uses linear interpolation between data points, but allows you to easily customize it to use your own interpolation functions by passing an object that implements the following interface:
```
const interpolator = {
// Takes the value & range and returns a percentage [0, 100] where the value sits from left to right
getPercentageForValue: (val: number, min: number, max: number): number
// Takes the clientX (offset from the left edge of the ranger) along with the dimensions
// and range settings and transforms a pixel coordinate back into a value
getValueForClientX: (clientX: number, trackDims: object, min: number, max: number): number
}
```
Here is an exmaple of building and using a logarithmic interpolator!
```javascript
import { useRanger } from 'react-ranger'
const logInterpolator = {
getPercentageForValue: (val, min, max) => {
const minSign = Math.sign(min)
const maxSign = Math.sign(max)
if (minSign !== maxSign) {
throw new Error(
'Error: logarithmic interpolation does not support ranges that cross 0.'
)
}
let percent =
(100 / (Math.log10(Math.abs(max)) - Math.log10(Math.abs(min)))) *
(Math.log10(Math.abs(val)) - Math.log10(Math.abs(min)))
if (minSign < 0) {
// negative range, means we need to invert our percent because of the Math.abs above
return 100 - percent
}
return percent
},
getValueForClientX: (clientX, trackDims, min, max) => {
const { left, width } = trackDims
let value = clientX - left
value *= Math.log10(max) - Math.log10(min)
value /= width
value = Math.pow(10, Math.log10(min) + value)
return value
},
}
useRanger({
interpolator: logInterpolator,
})
```
# Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tr>
<td align="center"><a href="https://tannerlinsley.com"><img src="https://avatars0.githubusercontent.com/u/5580297?v=4" width="100px;" alt=""/><br /><sub><b>Tanner Linsley</b></sub></a><br /><a href="https://github.com/tannerlinsley/react-ranger/commits?author=tannerlinsley" title="Code">💻</a> <a href="#ideas-tannerlinsley" title="Ideas, Planning, & Feedback">🤔</a> <a href="#example-tannerlinsley" title="Examples">💡</a> <a href="#maintenance-tannerlinsley" title="Maintenance">🚧</a> <a href="https://github.com/tannerlinsley/react-ranger/pulls?q=is%3Apr+reviewed-by%3Atannerlinsley" title="Reviewed Pull Requests">👀</a></td>
<td align="center"><a href="http://cherniavskii.com"><img src="https://avatars2.githubusercontent.com/u/13808724?v=4" width="100px;" alt=""/><br /><sub><b>Andrew Cherniavskii</b></sub></a><br /><a href="https://github.com/tannerlinsley/react-ranger/commits?author=cherniavskii" title="Code">💻</a> <a href="https://github.com/tannerlinsley/react-ranger/issues?q=author%3Acherniavskii" title="Bug reports">🐛</a></td>
<td align="center"><a href="http://twitter.com/tibotiber"><img src="https://avatars3.githubusercontent.com/u/5635553?v=4" width="100px;" alt=""/><br /><sub><b>Thibaut Tiberghien</b></sub></a><br /><a href="https://github.com/tannerlinsley/react-ranger/commits?author=tibotiber" title="Documentation">📖</a></td>
<td align="center"><a href="https://github.com/gargroh"><img src="https://avatars3.githubusercontent.com/u/42495927?v=4" width="100px;" alt=""/><br /><sub><b>Rohit Garg</b></sub></a><br /><a href="#tool-gargroh" title="Tools">🔧</a></td>
</tr>
</table>
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
<!-- Force Toggle -->
CHANGELOG.md
es/index.js
lib/index.js
umd/react-ranger.js
umd/react-ranger.min.js
umd/react-ranger.min.js.map
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc