1.0.0 • Published 6 years ago
react-threede-buttons v1.0.0
< ThreeButtons />
<ThreeButtons />
is a customisable React component that renders animated 3D buttons
Installation
$ npm install React-Three-Buttons
Components
import { ThreeButton, LoaderButton, SocialButton } from 'react-threebuttons';
Styles
sass
@import '/node_modules/react-threebuttons/dist/styles.css'
js
import 'react-threebuttons/dist/styles.css'
Usage
<ThreeButton text="press" type="press" size="large" styles={My_style_object} />
<SocialButton type="instagram" size="large" styles={My_style_object} />
<LoaderButton text="progress" size="large" styles={My_style_object} />
Or with a pre made theme
import { ThreeButton, LoaderButton, SocialButton, Theme } from 'threebuttons';
<Theme theme="blue-light">
<ThreeButton text="press" type="press" size="large" />
<ThreeButton text="visible text" type="slide" slideText="hidden text" size="large" />
<ThreeButton text="hover me" type="hover" size="large" />
<ThreeButton text="click me" type="click" size="large" />
<LoaderButton text="progress" size="large" />
<LoaderButton text="async progress"type="async" async={{uri: 'https://yrgo.github.io/api/movies/mean-girls.json', callback, errorCallback, parseJson: true}} size="large"/>
</Theme>
Props
ThreeButton
Attributes | Type | Default | Description | Options |
---|---|---|---|---|
Text | string | button | The text to be displayed on the button | null |
slideText | String | null | text behind the slide type button | null |
Type | string | Press | The animation of the button | press, slide, 3d, click |
Size | String | Medium | The size of the button | small, medium, large |
Styles | Object | see below | the custom styles of the button | backgroundColor, padding, fontSize, border |
Icon | String | null | A icon from fontAwesome | fontAwesome |
handleClick | function | null | callback to fire when clicked | null |
disabled | boolean | false | disable all click events and greyscales the button | true, false |
ripple | boolean | true | ripple effect when clicked | true, false |
Default styles
{
backgroundColor: 'rgb(31, 65, 167)',
padding: 16,
fontSize: '',
border: 'defaults to backgroundColor',
}
SocialButton
Attributes | Type | Default | Description | Options |
---|---|---|---|---|
Text | string | The text to be displayed on the button | null | |
Type | string | The type of social media | facebook, facebook-dark, instagram, linkedin, twitter, github, reddit, mail, google-plus, pinterest, youtube | |
Size | String | Medium | The size of the button | small, medium, large |
Click | String | press | The animation of the button | press, 3d |
Link | String | '' | anchor link of the button | null |
Styles | Object | see below | the custom styles of the button | padding, fontSize, |
Default styles
{
padding: 16,
fontSize: '',
}
LoaderButton
Attributes | Type | Default | Description | Options |
---|---|---|---|---|
Text | string | Button | The text to be displayed on the button | null |
Type | string | sync | type of loader | sync, async |
Size | String | Medium | The size of the button | small, medium, large |
Styles | Object | see below | the custom styles of the button | backgroundColor, padding, fontSize, border |
loadingLabel | String | hang on | text while loading | null |
loadedLabel | String | success | text when loaded | null |
Duration | String | '1000ms' | The loading time | null |
Styles | Object | see below | the custom styles of the button | padding, fontSize, backgroundColor, border |
callback | function | () => {} | callback to fire when completed load | null |
async | object | undefined | config for the async call | se below |
disabled | boolean | false | disable all click events and greyscales the button | true, false |
async example
const myAsyncConfig = {
uri: 'https://mysite/api/data.json',
callback: (jsonData) => (console.log(jsonData)),
errorCallback: (err) => {console.log(err)},
parseJson: true,
}
<LoaderButton type="async" text="my async loader" async={myAsyncConfig}
Default styles
{
backgroundColor: 'rgb(31, 65, 167)',
padding: 16,
fontSize: '',
border: 'defaults to backgroundColor',
}
Author
Andreas Nordh
- Checkout my Website (TBD)
- Contact me
- View some of my work @ Web Portfolio
You get a button! You get a button! Everybody gets a button
</ ThreeButtons>
1.0.0
6 years ago