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 open example/index.html