A neumorphic toggle-switch component for React.

Installation

$ npm install react-neumorphic-toggle

or

$ yarn add react-neumorphic-toggle

Usage

import React from 'react';

import { Switch } from 'react-neumorphic-toggle';

function App() {
  return (
    <div className="App">
      <Switch />
    </div>
  );
}

export default App;

API

| Prop | Type | Default | Description | | |----------------|------------------|-----------|---------------------------------------------------------------------------------------|---| | autofocus | bool | false | Sets or returns whether a checkbox should automatically get focus when the page loads | | | checked | bool | Required | Sets or returns the checked state of a checkbox | | | onChange | func | Required | called when user clicks the toggle | | | defaultChecked | bool | false | Returns the default value of the checked attribute | | | defaultValue | string | false | Sets or returns the default value of a checkbox | | | disabled | bool | false | Sets or returns whether a checkbox is disabled or not | | | form | object | null | Returns a reference to the form that contains the checkbox | | | indeterminate | bool | false | Sets or returns the indeterminate state of the checkbox | | | name | string | checkbox | Sets or returns the value of the name attribute of a checkbox | | | required | bool | false | Sets or returns whether the checkbox must be checked before submitting a form | | | type | string | checkbox | Returns which type of form element the checkbox is | | | value | string | undefined | Sets or returns the value of the value attribute of a checkbox | | | theme | object or string | light | changes the theme of the toggle

Theme

The theme prop can be used to change the theme of the toggle.

// supports two themes dark or light
<Switch theme='dark'/>
// default
<Switch theme='light'/>

or use an object

const theme = {
  color: '#55b9f3',
  primaryShadowColor: '#489dcf',
  secondaryShadowColor: '#62d5ff'
}

<Switch theme={theme} />

License

MIT