react-buttons
A few common buttons with css and helpers.
Live example: react-buttons
Installation
$ npm install -S react-buttons
Include the css file or import the sass file
// symlink way // or
I personally prefer the symlink way. You can checkout my postinstall script for an example.
Each component can be disabled and not inluded in your compiled source by changing the variables $include-x Check the sass source
Example
;;; ; { superprops; thisshouldComponentUpdate = PureRenderMixinshouldComponentUpdate; } { return <div> <Button faIcon="plus" onClick=/* sommething */>New Thing</Button> <Button materialIcon="favorite" iconBefore=true onClick=/* sommething */>Favorite</Button> <IconButton faIcon="plus" label="Add a new thing" onClick=/* something */ /> <IconButton materialIcon="favorite" label="Add this as a favorite" onClick=/* something */ /> <HamburgerButton active=false size="lg" onClick=/* something */ /> <HamburgerButton active=thispropsbtnActive onClick=/* toggle */ /> <FlatButton color="primary" onClick=/* something */ /> <FloatingButton faIcon="plus" label="Add a new thing" onClick=/* something */ /> </div> } ReactDOM;
Check out the examples folder or the live demo for other ideas.
React Components
Button
This is just a basic button that helps with placing icons on a button before or after the text.
static propTypes = iconBefore: PropTypesbool faIcon: PropTypesstring materialIcon: PropTypesstring type: PropTypes className: PropTypesstring onClick: PropTypesfunc children: PropTypesnode ripple: PropTypesbool rippleTime: PropTypesnumber static defaultProps = iconBefore: false type: 'button' {} ripple: false rippleTime: 300
When giving a font-awesome icon, do not pass in 'fa fa-whatever'. All that is needed is 'whatever'.
There is a corresponding css class names .icon-text-btn
that gets applied to this button that adds a margin to icons and their text.
There can be a ripple effect on the button if you change the value of ripple
to true. You just need a background color on the button to work.
IconButton
This is a button that is only an icon with no text. There is some attempted accessibility built into this component as well. If you hover over the button, help text will appear describing what that button should be doing.
static propTypes = label: PropTypesstringisRequired helpPosition: PropTypes faIcon: PropTypesstring materialIcon: PropTypesstring type: PropTypes helpTextTime: PropTypesnumber onClick: PropTypesfunc className: PropTypesstring children: PropTypesnode static defaultProps = helpPosition: 'bottom' type: 'button' helpTextTime: 1000 {}
The prop label
is used as the text for the help text.
The prop helpPosition
is used to tell which side of the button the floating-box of text will appear
The corresponding css class name is .icon-btn
. The help text extends a class floating-box
.
HamburgerButton and FloatingButton both use IconButton and pass all props into it. So the propTypes here are valid for them as well.
HamburgerButton
This is just a pretty hamburger button that has the lines move into an X if you change the prop active
to true.
static propTypes = active: PropTypesbool label: PropTypesstringisRequired helpPosition: PropTypes onClick: PropTypesfunc className: PropTypesstring size: PropTypesstring static defaultProps = active: false size: 'md' helpPosition: 'bottom'
The hamburger button is generated with some css and the corresponding class is .hamburger-btn
.
Since modifying the colors and changing the sizes is a bit of work, there are 3 sass mixins available.
hamburger-size
, hamburger-color
, hamburger-position
So if you wanted to create a new alternative color button,
$ $} $ $}
I can't promise that custom sizes always work correctly. Even numbers usually worked ok.
FlatButton
Creates a 'flat' button that presses down when clicked.
static propTypes = color: PropTypesstring active: PropTypesbool className: PropTypesstring static defaultProps = color: 'default' active: false
The color is any string that you want to add to the end of flat-btn-
.
There are 3 types available at the start default
, primary
, error
.
There is a mixin you can use to create a new button color alternative flat-btn
$ $ $ $ $ @} // creates }
FloatingButton
This is just a button that floats in the bottom right hand corner of the screen.
static propTypes = color: PropTypesstring className: PropTypesstring static defaultProps = color: 'default' helpPosition: 'left'
The color is any string that you want to add to the end of floating-btn-
.
There are 3 types available at the start default
, primary
, error
.
There is no mixin for this one because it is easy enough to create your own here.
.floating-box / .help-text
There is a reusable relative menu named .floating-box
. View src/scss/_helpers.scss
for more.
Helper functions
There are 2 helper functions for creating ripple effects if you do not want to use the buttons here.
;;; { superprops; thisripple = null; thisrippleTimeout = null; } { thisripple = ; } { ifthisrippleTimeout ; } { thisrippleTimeout = ; } { return <button type="button" onClick=thisonClick>I Am a Ripple Button</button>; }
Development
To run the local build and check for changes in the examples,
$ npm start # or $ gulp serve
To build for a release
$ npm run build # or $ gulp dist