react-on-off-button v1.0.3

React-Toggler

A customizable on-off toggle button | Demo

Description

• touch/swipe compatible
• All styles can be passed as props
• Set a custom namespace for class names
• Uses Shadow DOM to help avoid CSS conficts
• Inlude an optional label before or after the button

Getting Started

Install from npm

npm i react-on-off-button

Example Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Toggler from 'react-on-off-button';

const {
	useState,
} = React;

const App = () => {
	const [
		checked,
		setChecked,
	] = useState( false );
	
	const onChange = ( checked, slug ) => {
		console.log( slug ) // "menu-enabled"
		setChecked( checked )
	};
	
	return (
		<Toggler 
			slug="menu-enabled"
			checked={ checked } 
			onChange={ onChange } 
		/>
	);
};

ReactDOM.render( <App />, document.getElementById( 'app' ) );

All Props and their defaults

<Toggler 
	slug=""
	namespace=""
	checked={ false } 
	onChange={ ( checked, slug ) => {} } 
	bgColor="#000"
	textColor="#FFF"
	circleColor="#FFF"
	activeBgColor="blue"
	activeTextColor="#FFF"
	activeCircleColor="#FFF"
	width={ 52 }
	height={ 22 }
	fontSize={ 12 }
	textIndent={ 10 }
	circleSize={ 12 }
	borderRadius={ 10 }
	transitionDuration={ 0.2 }
	textOn="ON"
	textOff="OFF"
	swipeThreshold={ 20 }
	label=""
	labelFontSize={ 18 }
	labelSpacing={ 10 }
	labelTextColor="#000"
	labelBefore={ false }
/>

Editing JS/SCSS source files

npm install
npm run watch
npm run build
npm run test

Built With / Technology Used

• React
• SASS
• Babel
• Webpack
• ESLint
• Jest
• Enzyme
• core-js
• react-shadow

Authors

• Jason McElwaine - Initial work - CodingJack

License

• The original work in this project is licensed under MIT
• All dependencies and cited technology above are licensed under MIT

Additional Notes

• react-toggler is a PureComponent