react-swap
React component-wrapper to swap one element with another and back, useful to show/hide popups, expand/collapse elements, various toggles, etc.
Installation
NPM
npm install --save react react-swap
Don't forget to manually install peer dependencies (react
) if you use npm@3.
1998 Script Tag:
(Module exposed as `ReactSwap`)
Demo
http://nkbt.github.io/react-swap
Codepen demo
http://codepen.io/nkbt/pen/zvodrN
Usage
;;; const Off = React; const On = React; const Clickable = React; const Hoverable = React; const Delayed = React; const Deep = React; const WithCallback = React; const App = React; const appRoot = document;documentbody;ReactDOM;
Options
isHover
: PropTypes.bool
Should swap happen on hover rather then on click (default)?
isSwapped
: PropTypes.bool
Should be initially swapped?
delay
: PropTypes.number
Delay in ms
for swapping back to first element.
dataHandler
: PropTypes.string
Custom data attribute name for click-swap handler.
Defaults to swapHandler
which is data-swap-handler
onSwap(value)
: PropTypes.func
Callback which is called every time ReactSwap state is changed, value
is true
or false
WARNING
At the moment you can only use native DOM elements as swappable children. Though you can put any custom components inside as shown in example above.
The reason is that when custom component is used, it is not possible to capture onClick
on it.
License
MIT