React component re-implementation for jQuery.slideToggle feature
React version of jQuery.slideToggle. JavaScript animation where height is set on every requestAnimationFrame. The toggle direction can be reversed during the movement.
If you are looking for a CSS transition based alternative, then use this instead https://github.com/kunukn/react-collapse
Default easing is cubicInOut. You can reverse the toggle before the movement completes. Ease in-out works best visually when reverse toggling is to be used.
This should be A11Y friendly, you can test the tabindex by tabbing. The collapsed items should be skipped due to usage of display:none (inert functionality)
JS animation is used for best animation control and possibility of adding interpolation or using advanged easing configuration which you can't with CSS alone. This triggers browser reflows on every requestAnimationFrame. If you have a very long page this might not be the best option to use.
Look in App component for inspiration. Apply the styling as needed.
import SlideToggle from "react-slide-toggle";
// or
// const SlideToggle = require("react-slide-toggle");
// Apply optional padding to .my-collapsible__content-inner
<SlideToggle
render={({ toggle, setCollapsibleElement }) => (
<div className="my-collapsible">
<button className="my-collapsible__toggle" onClick={toggle}>
toggle
</button>
<div className="my-collapsible__content" ref={setCollapsibleElement}>
<div className="my-collapsible__content-inner">Collapsible content</div>
</div>
</div>
)}
/>;
import SlideToggle from "react-slide-toggle";
// Apply optional padding to .my-collapsible__content-inner
<SlideToggle>
{({ toggle, setCollapsibleElement }) => (
<div className="my-collapsible">
<button className="my-collapsible__toggle" onClick={toggle}>
toggle
</button>
<div className="my-collapsible__content" ref={setCollapsibleElement}>
<div className="my-collapsible__content-inner">Collapsible content</div>
</div>
</div>
)}
</SlideToggle>;
import SlideToggle from "react-slide-toggle";
class MyComponent extends React.Component {
state = { toggleEvent: 0 };
onToggle = () => {
this.setState({ toggleEvent: Date.now() });
};
render() {
return (
<div>
<button className="toggle" onClick={this.onToggle}>
Toggle
</button>
<SlideToggle toggleEvent={this.state.toggleEvent}>
{({ setCollapsibleElement }) => (
<div className="my-collapsible">
<div
className="my-collapsible__content"
ref={setCollapsibleElement}
>
<div className="my-collapsible__content-inner">
Collapsible content
</div>
</div>
</div>
)}
</SlideToggle>
</div>
);
}
}
import SlideToggle from "react-slide-toggle";
import BezierEasing from "bezier-easing"; // optional
const bezierEaseInOutQuart = BezierEasing(0.77, 0, 0.175, 1);
<SlideToggle
duration={280 /* default 300 */}
easeCollapse={bezierEaseInOutQuart /* default cubicInOut */}
easeExpand={bezierEaseInOutQuart /* default cubicInOut */}
collapsed /* default falsy */
irreversible /* default falsy */
noDisplayStyle /* default falsy */
noOverflowHidden /* default falsy */
bestPerformance /* default falsy */
whenReversedUseBackwardEase /* default falsy */
interpolateOnReverse /* default falsy */
offsetHeight /* default scrollHeight */
onExpanded={({ hasReversed }) => {
/* optional event hook */
}}
onExpanding={({ range, progress, hasReversed }) => {
/* optional event hook */
}}
onCollapsed={({ hasReversed }) => {
/* optional event hook */
}}
onCollapsing={({ range, progress, hasReversed }) => {
/* optional event hook */
}}
onMount={({ toggleState, toggle }) => {
/* optional event hook */
}}
onUnmount={({ toggleState }) => {
/* optional event hook */
}}
expandEvent /* default undefined */
collapseEvent /* default undefined */
toggleEvent /* default undefined */
render={({
toggle,
setCollapsibleElement,
toggleState,
isMoving,
hasReversed,
range /* linear value between [0 and 1] */,
progress /* easing result value between [0 and 1] */
}) => {
/* optional logic here */
/*
markup example
where setCollapsibleElement, toggle and progress are used
*/
return (
<div className="slide-toggle">
<div className="slide-toggle__header">
<button className="slide-toggle__button" onClick={toggle}>
toggle
</button>
</div>
<div className="slide-toggle__box" ref={setCollapsibleElement}>
<div
className="slide-toggle__box-inner"
style={{ opacity: Math.max(0.5, progress) }}
>
Collapsible content
</div>
</div>
</div>
);
}}
/>;
Date.now()
to invoke a controlled expandDate.now()
to invoke a controlled collapseDate.now()
to invoke a controlled togglehttps://unpkg.com/react-slide-toggle/
<script src="https://unpkg.com/react-slide-toggle/dist/ReactSlideToggle.umd.js">
<script>
<script>
var SlideToggle = window.ReactSlideToggle;
</script>
https://www.npmjs.com/package/react-slide-toggle
The component provides the functionality.
Minimum requirement is to bind the collapsible element with setCollapsibleElement
.
Use the toggle
function to toggle the collapsible element.
Look for examples in the App component
import eases from "eases";
import BezierEasing from "bezier-easing";
To minimize the component size, no default easing library has been added.
You can see examples of JS-easing library usage here
componentWillUnmount
and render
React.Component
setState