slide-toggle-react is a React component that provides a smooth slide animation for showing and hiding content. It allows you to easily create collapsible elements with customizable duration and easing functions.
npm install react-smooth-slide-toggleslide-toggle-react is a React component that provides a smooth slide animation for showing and hiding content. It allows you to easily create collapsible elements with customizable duration and easing functions.
You can install the package using npm:
``bash
npm install react-smooth-slide-toggle
`
Demo
`js
import React from 'react';
import { SlideToggle } from 'react-smooth-slide-toggle';
const App = () => { This content will slide in and out when the button is clicked.
return (
);
};
export default App;
`
`txt
The SlideToggle component accepts the following props:
trigger: (required) React element that serves as the trigger for the slide animation. When this element is clicked, the content will slide in or out.
easing: (optional) Specifies the easing function to be used for the slide animation. Available options are:
'easeLinear' Default
'easeInQuad'
'easeOutQuad'
'easeInOutQuad'
'easeInCubic'
'easeOutCubic'
'easeInOutCubic'
'easeInQuart'
'easeOutQuart'
'easeInOutQuart'
'easeInQuint'
'easeOutQuint'
easeInOutQuint'
duration: (optional) The duration of the slide animation in milliseconds. Default is 700ms.
expanded: (optional) If set to true, the content will be initially shown. If set to false, the content will be initially hidden. Default is false.
callBack: (optional) A callback function that will be called after the slide animation is completed.
`
##### SlideToggle
A React component that handles slide animations for showing and hiding content.
`txt
getTotalHeightWithMargins(element: HTMLElement): number
`
A utility function to calculate the total height of an element, considering its height and top and bottom margins.
#### Example with Custom Easing and Duration
`js
import React from 'react';
import { SlideToggle } from 'react-smooth-slide-toggle';
const App = () => {
return (
easing="easeOutQuad"
duration={1000}
expanded={true}
>
This content will slide in and out with a custom easing and duration.
export default App;
``
Contributions are welcome! If you find any issues or have suggestions for improvements, feel free to create a pull request or open an issue on GitHub.