Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-neumorphic-toggle with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("styled-components/package.json"); // styled-components is a peer dependency. var reactNeumorphicToggle = require("react-neumorphic-toggle")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-neumorphic-toggle v1.0.1

React neumorphic toggle switch

A neumorphic toggle-switch component for React.

npm GitHub stars gzip size Travis (.org)

toggle

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

PropTypeDefaultDescription
autofocusboolfalseSets or returns whether a checkbox should automatically get focus when the page loads
checkedboolRequiredSets or returns the checked state of a checkbox
onChangefuncRequiredcalled when user clicks the toggle
defaultCheckedboolfalseReturns the default value of the checked attribute
defaultValuestringfalseSets or returns the default value of a checkbox
disabledboolfalseSets or returns whether a checkbox is disabled or not
formobjectnullReturns a reference to the form that contains the checkbox
indeterminateboolfalseSets or returns the indeterminate state of the checkbox
namestringcheckboxSets or returns the value of the name attribute of a checkbox
requiredboolfalseSets or returns whether the checkbox must be checked before submitting a form
typestringcheckboxReturns which type of form element the checkbox is
valuestringundefinedSets or returns the value of the value attribute of a checkbox
themeobject or stringlightchanges 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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free