React-threede-buttons NPM

< ThreeButtons />

MIT airbnb

<ThreeButtons /> is a customisable React component that renders animated 3D buttons

alt

Installation

$ npm install React-Three-Buttons

Components

import { ThreeButton, LoaderButton, SocialButton } from 'react-threebuttons';

Styles

sass

@import '/node_modules/react-threebuttons/dist/styles.css'

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>

react 3d button loading social

prop-types react react-dom

@everything-registry/sub-chunk-2618 @zalastax/nolb-react-th @infinitebrahmanuniverse/nolb-react-th

1.0.0

8 years ago