muni-componentes
A React UI Component to display an awesome Toggle Button control
Last updated 9 months ago by fedeamura .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install muni-componentes 
SYNC missed versions from official npm registry.

Overview

⚠️ IMPORTANT This React component is the new version of React Switch Button.

Backward compatibility

You can use this new version instead of React Switch Button. Currently, I'm still supporting the compatibility with the previous version. This means that there are some stuff deprecated. For example

Deprecated Description Use instead
onChange event fired when toggle changes onToggle
mode="switch" the new mode props are toggle and select mode="switch"
theme="rsbc-switch-button-flat-round" appearance theme theme="round"
theme="rsbc-switch-button-flat-square" appearance theme theme="square"

So, please, if you was using the previous version, update the new features as soon as possible, because they will be removed soon.

Demo

This component is designed to render an awesome switch/toggle component. Visit the online demo.

Installation

You can use either npm

npm i react-toggle-component

or yarn

yarn add react-toggle-component

Basic Usage

First of all, remember to import the component.

import React from "react"

import Toggle from "react-toggle-component"
import "react-toggle-component/styles.css"

class Application extends React.Component {

    constructor( props )
    {
      super( props );
    }

    render() {
        return (
            <Toggle label="Click me" />
        );
    }

}

You may use the toggle button without any label, by using

<Toggle />

Of course, you can create a left label, a right label, or both

<Toggle label="Click me" />

<Toggle labelRight="Click me" />

<Toggle label="Click me on left" labelRight="Click me on right" />

Default styles

Youmay import the default styles by using

import "react-toggle-component/styles.css"

Default checked

You can set the default state of component by checked props

<Toggle checked={true} />

Disabled

Of course, you can disable the component

<Toggle disabled={true} />

Events

You can use onToggle event to get when the toggle changes

<Toggle checked={this.state.checked} onToggle={value => this.setState({checked:value})} />

Backward compatibility

To mainteince the backward compatibility you may continue to use onChange handler

<Toggle checked={this.state.checked} onChange={value => this.setState({checked:value})} />
Event Params Note
onToggle (checked, event) The checked value may be true or false. You may use also the event to get the name or id of component.

Mode

You can also use the toggle as selected component. This mode is useful when you have to selected by two choices

<Toggle mode="select"
        label="Theme Light"
        labelRight="Theme Dark"
        checked={this.state.checked}
        onChange={value => this.setState({checked:value})} />

Props

Prop Type Description
name string Component name, default toggle
id string Component id, when null or undefined it'll be name
label string Left label
labelRight string Right label
className string Additional classes for the main container
checked boolean Default checked status. Possibible values are true or false. Default false
mode string The toggle mode. Possible values are toggle or select. Default toggle.
theme string The toggle appearance theme. Possible values are round or square. Default round.
disabled boolean If true the toggle is disabled. Default false.

Contributing

Thanks for any your contribute ????????.

Bugs ????

Use the GitHub issues.

License

MIT Licensed. Copyright (c) Giovambattista Fazioli 2018.

Current Tags

  • 1.2.2                                ...           latest (9 months ago)

7 Versions

  • 1.2.2                                ...           9 months ago
  • 1.2.1                                ...           9 months ago
  • 1.2.0                                ...           9 months ago
  • 0.1.0                                ...           9 months ago
  • 0.0.3                                ...           9 months ago
  • 0.0.2                                ...           9 months ago
  • 0.0.1                                ...           9 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 8
Last Day 0
Last Week 0
Last Month 3
Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |