https://github.com/shahabvshahabi1996/use-react-switch

This is a reusable and customizable react toggle switch component
https://github.com/shahabvshahabi1996/use-react-switch

es6 es6-javascript es6-modules javascript reactjs reusable reusable-components switch toggle-switches

Last synced: 20 days ago
JSON representation

This is a reusable and customizable react toggle switch component

• Host: GitHub
• URL: https://github.com/shahabvshahabi1996/use-react-switch
• Owner: shahabvshahabi1996
• Created: 2019-04-16T14:38:03.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-05-01T19:56:23.000Z (about 7 years ago)
• Last Synced: 2025-06-26T11:17:41.087Z (12 months ago)
• Topics: es6, es6-javascript, es6-modules, javascript, reactjs, reusable, reusable-components, switch, toggle-switches
• Language: JavaScript
• Homepage: https://codesandbox.io/s/0yn4zyjoxv?fontsize=14
• Size: 128 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 😻 use-react-switch

> 

[![NPM](https://img.shields.io/npm/v/use-react-switch.svg)](https://www.npmjs.com/package/use-react-switch) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install 😎

```bash

npm install --save use-react-switch

```

## Usage 🤔

```jsx

import React, { Component } from 'react'

import Switch from 'use-react-switch'

class Example extends Component {

  

  constructor() {

    super();

    this.state = {

      isOpen : false

    }

  }

  render () {

    let {isOpen} = this.state;

    return (

       this.setState({isOpen : !isOpen})}

        isOpen={isOpen}

      />

    )

  }

}

```

## Props

| Props |Default Value| Type | Description |

|-----|-----|-----|----|

| **isOpen** | **false** | Boolean | Shows the status of switch (Open Or Close) |

| **onClick** | ____ | Function | ____ |

| **name** |  ____ | String | name of your swicth component for handling states |

| **containerStyles** | ____ | Object | inline-styles for your switch container |

| **toggleStyles** | ____ | Object | inline-styles for switch toggle | 

## Demo 😍 

This is how it looks but if you looking for something live click [here 👇](https://codesandbox.io/s/0yn4zyjoxv?fontsize=14)

![use-react-switch](https://user-images.githubusercontent.com/19559766/56836882-c8cbfd00-688d-11e9-9794-9dd040154326.png)

#### Or you can run it locally 🎉

First you need to clone it : 

`git clone https://github.com/shahabvshahabi1996/use-react-switch.git`

Then hit :

`npm start` || `yarn start`

After that go to example directory and hit : 

`npm start`

Now you can check it out on your `http://localhost:3000/`

## License 📃

MIT © [shahabvshahabi1996](https://github.com/shahabvshahabi1996)