Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
react-ranger
Advanced tools
A render-prop component to build range and multi-range sliders in React. You want a range slider, and you want it your way!
Need Help? Click here to sign up for the React-Tools Spectrum community. We are constantly discussing implementation details and answering questions. :)
$ yarn add react-ranger
# or
$ npm install --save react-ranger
By default, <ReactRanger>
vertically expands its content:
import ReactRanger from "react-ranger";
const SimpleExample = () => (
<ReactRanger
show={true || false} // Toggle true or false to show or hide the content!
>
Hello world!
</ReactRanger>
);
duration
and easing
props. ReactRanger comes with a wide variety of easings built-in, too! Keep reading for a full list.import ReactRanger from "react-ranger";
const DurationAndEasingExample = () => (
<ReactRanger
show={true || false} // Toggle true or false to show or hide the content!
duration={500} // // The duration of the transition in milliseconds
easing={ReactRanger.easings.easeOutQuad} // Comes with all the easings you could want!
>
Hello world!
</ReactRanger>
);
Want to animate width, opacity, or transforms? You can use your own custom show/hide styles by setting the styleShow
and styleHide
props with regular react style
objects:
import ReactRanger from "react-ranger";
const CustomExample = () => (
<ReactRanger
show={true || false} // Toggle true or false to show or hide the content!
styleHide={{
// This style will be used when hidden
height: "0px",
width: "0",
opacity: 0
}}
styleShow={{
// This style will be used when shown
height: "auto",
width: "100%",
opacity: 1
}}
>
Hello world!
</ReactRanger>
);
<ReactRanger>
The default export and main component for React-ranger.
Prop | Required | Default Value | Description |
---|---|---|---|
show | true | false | Determines whether to "show" the content or not. |
duration | 300 | The transition-duration of the transition used to show the content | |
easing | easeOutQuint | The transition-timing-function used to show the content | |
transitionProperty | all | The transition-property used to show the content | |
unmountOnHide | true | Determines whether the children will be unmounted when not visible. | |
transitionOnMount | false | Determines whether to animate from a hidden to a shown state on mount | |
styleHide | { height: '0px' } | The standard react style object used to show the element | |
styleShow | { height: 'auto' } | The standard react style object used to hide the element | |
style | { overflow: 'hidden' } | The standard react style object |
ReactRanger.easings
React-ranger comes packaged with some awesome easings that are accessible via ReactRanger.easings
. They are extremely simple to use too:
import ReactRanger from "react-ranger";
const SimpleExample = () => (
<ReactRanger show={true} easing={ReactRanger.easings.easeOutQuart}>
Hello world!
</ReactRanger>
);
Below is a full list of the available easings located at ReactRanger.easings
ReactRanger.easings = {
// Cubic
easeInCubic: "cubic-bezier(0.550, 0.055, 0.675, 0.190)",
easeOutCubic: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
easeInOutCubic: "cubic-bezier(0.645, 0.045, 0.355, 1.000)",
// Circ
easeInCirc: "cubic-bezier(0.600, 0.040, 0.980, 0.335)",
easeOutCirc: "cubic-bezier(0.075, 0.820, 0.165, 1.000)",
easeInOutCirc: "cubic-bezier(0.785, 0.135, 0.150, 0.860)",
// Expo
easeInExpo: "cubic-bezier(0.950, 0.050, 0.795, 0.035)",
easeOutExpo: "cubic-bezier(0.190, 1.000, 0.220, 1.000)",
easeInOutExpo: "cubic-bezier(1.000, 0.000, 0.000, 1.000)",
// Quad
easeInQuad: "cubic-bezier(0.550, 0.085, 0.680, 0.530)",
easeOutQuad: "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
easeInOutQuad: "cubic-bezier(0.455, 0.030, 0.515, 0.955)",
// Quart
easeInQuart: "cubic-bezier(0.895, 0.030, 0.685, 0.220)",
easeOutQuart: "cubic-bezier(0.165, 0.840, 0.440, 1.000)",
easeInOutQuart: "cubic-bezier(0.770, 0.000, 0.175, 1.000)",
// Quint
easeInQuint: "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
easeOutQuint: "cubic-bezier(0.230, 1.000, 0.320, 1.000)",
easeInOutQuint: "cubic-bezier(0.860, 0.000, 0.070, 1.000)",
// Sine
easeInSine: "cubic-bezier(0.470, 0.000, 0.745, 0.715)",
easeOutSine: "cubic-bezier(0.390, 0.575, 0.565, 1.000)",
easeInOutSine: "cubic-bezier(0.445, 0.050, 0.550, 0.950)",
// Back
easeInBack: "cubic-bezier(0.600, -0.280, 0.735, 0.045)",
easeOutBack: "cubic-bezier(0.175, 0.885, 0.320, 1.275)",
easeInOutBack: "cubic-bezier(0.680, -0.550, 0.265, 1.550)"
};
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!
React Ranger uses the MIT license. For more information on this license, click here.
FAQs
Hooks for building range and multi-range sliders in React
The npm package react-ranger receives a total of 5,595 weekly downloads. As such, react-ranger popularity was classified as popular.
We found that react-ranger demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.