react-stretchable-button
A simple React button component that can be stretched to display something on mouse over.
Demo
Demo is available with source code.
Installation
npm install react-stretchable-button --save
API
Property | Description | Default value | type |
---|---|---|---|
height |
Height of button | 50 | number |
width |
Width of button before and after strech | [50,100] | array |
style |
Style of root div | null |
object |
buttonStyle |
Style of button div | null |
object |
square |
Should button shape be square | false |
boolean |
alignRight |
Should button stretch to left | false |
boolean |
stretchPadding |
Padding of stretched button | 25 | number |
zDepth |
Set zDepth of button, whose range is [0,5] | 2 | number |
transitionDuration |
Duration time of button stretching (ms) | 250 | number |
emergeDelay |
Delay time of component emerging | 100 | number |
onMouseEnter |
Will be invoked each time mouse enters button | null |
function |
onMouseLeave |
Will be invoked each time mouse leaves button | null |
function |
componentDisplayed |
Component displayed before button is stretched | null |
node |
componentToDisplay |
Component to display after button is stretched | null |
node |
Development Setup
- Clone the repo:
git clone https://github.com/zianke/react-stretchable-button.git
- Install the dependencies:
cd react-stretchable-button && npm install
- Start webpack:
npm start
- Modify
example/index.js
and openexample/index.html