< 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 | facebook | The text to be displayed on the button | null | Type | string | facebook | 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>