Slide up/down component for React + Styled Components
React component for sliding up and down it's content.
See DEMO
Benefits:
- Does not depend on any external effect library (yes, NO jQuery).
- Fast animations. The effect is done with CSS3 transitions.
Installation
npm i -S react-styled-collapser
Example of use
<Button onClick=thistoggle expanded> thisstatecollapsed ? 'Reveal' : 'Hide'</Button><Collapser collapsed=thisstatecollapsed> ...</Collapser>
For more examples take a look into /src/docs/index.js
.
Props
collapsed
(boolean) Defines current state.duration
(integer, default=200) Effect duration in milliseconds.easing
(string, default="ease") CSS3 easing function.collapsedHeight
(integer, default=0) Maximum height of content shown in collapsed state.hasCropper
(integer, default=true) Whether to show a shrinked content indicator line in half-collapsed state.