https://github.com/ntamas/react-shapeshifter
A React component that is able to render various commonly used button shapes with only three lines, morphing smootly between shapes using CSS transitions.
https://github.com/ntamas/react-shapeshifter
react react-button react-component
Last synced: 9 months ago
JSON representation
A React component that is able to render various commonly used button shapes with only three lines, morphing smootly between shapes using CSS transitions.
- Host: GitHub
- URL: https://github.com/ntamas/react-shapeshifter
- Owner: ntamas
- License: mit
- Created: 2017-10-26T09:28:09.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-04-30T10:49:21.000Z (11 months ago)
- Last Synced: 2025-04-30T12:08:34.989Z (11 months ago)
- Topics: react, react-button, react-component
- Language: JavaScript
- Homepage: https://ntamas.github.io/react-shapeshifter
- Size: 1.94 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
react-shapeshifter
==================
A React component that is able to render various commonly used button shapes
with only three lines, morphing smootly between shapes using CSS transitions.
Usage
-----
```js
const Shapeshifter = require('react-shapeshifter')
const App = () => (
)
```
Props
-----
The component supports the following props:
* `shape`: defines the shape that the button will show. Currently supported
shapes are as follows:
* `menu` - a standard "hamburger"-style menu icon
* `close` - a "close" icon showing an X
* `left` - left-pointing arrow
* `right` - right-pointing arrow
* `up` - up-pointing arrow
* `down` - down-pointing arrow
* `color`: specifies the color of the component. You can use anything that
is accepted in CSS for the `background-color` property.
* `thickness`: the thickness of each line in the component.
* `width`: the length of each line in the component when showing the
"hamburger" icon. It should be set to nine times the thickness if you
want nice square-shaped buttons.
* `padding`: additional padding around the button, in pixels. The default
settings produce 48x48 px icons, suitable for touch targets in mobile
apps.
* `style`: allows you to specify additional CSS properties that will be
merged into the root tag of the component.
* `onClick`: callback function to call when the user clicks on the
component.