react-flat-switch

react-flat-switch

Inspired by Oleg Frolov's codepen, React Flat Switch is a toggle/switch component for React.

Installation

npm install --save react-flat-switch

Demo & Example

Live demo: cameronbourke.github.io/example/react-flat-switch

To build the example locally, clone this repo then run:

npm install
npm start
Then open localhost:8080 in a browser.

Usage

import React from 'react';
import FlatSwitch from 'react-flat-switch';

class App extends React.Component {
	...

	render() {
		const background = this.state.switchEnabled ? '#2196f3' : '#DCDCDC';
		const enabledStyles = {
			color: '#2196f3'
		};
		const disabledStyles = {
			color: '#F32121'
		};

		return (
			<section className='container' style={{ background }}>
				<FlatSwitch
					width={150}
					height={40}
					enabled={this.state.switchEnabled}
					enabledText='enable'
					enabledStyles={enabledStyles}
					disabledStyles={disabledStyles}
					disabledText='disable'
					className='list-item--switch'
					onSwitch={this.handleOnClick.bind(this)}
				/>
			</section>
		);
	}
}

Available Props

Property	Type	Default	Description
enabled	bool	(required)	determines which side of the switch is shown
enableText	string	enable	the text value of the enabled side of the switch
disableText	string	disable	the text value of the disabled side of the switch
onSwitch	func	undefined	called when the user clicks the switch
hideBoxShadow	bool	false	will hide any box shadows used
width	number/string	150	the width of the component
height	number/string	40	the height of the component
className	string	undefined	the classname of the component
enabledStyles	object	undefined	style object that will be applied to the enabled side
disabledStyles	object	undefined	style object that will be applied to the disabled side

Todo

• Extend Styling Capabilities

License

MIT Licensed Copyright (c) Cameron Bourke 2016