react-flat-switch v1.0.0

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

Todo

• Extend Styling Capabilities

License

MIT Licensed Copyright (c) Cameron Bourke 2016