Nonchalantly Perusing Magazines

    @sanchezjjose/react-toggle-component

    0.6.0 • Public • Published

    Build Status Coverage Status

    React Toggle Button Component

    A toggle button written in React, and supports making async http requests. Styles and transitions are fully customizable on init, for both on and off states.

    Github Page

    http://sanchezjjose.github.io/react-toggle-component

    Getting Started

    Installation

    npm install react-toggle-component
    

    or download one of the following distributions and drop it on the page:

    dist/react-toggle-component.dev.js
    
    dist/react-toggle-component.min.js
    

    Usage

    Initialize with ReactToggleComponent:

    • Browser: window.ReactToggleComponent
    • CommonJS and NodeJS: const ReactToggleComponent = require("react-toggle-component")

    Example:

    var domElement = document.body;
    
    var initialStateOn = true;
    
    var callback = function (data) { 
      console.log(data); 
    };
    
    var httpRequests = {
      onState: {
        url: 'https://randomuser.me/api', 
        postData: {}
      },
    
      offState: {
        url: 'https://randomuser.me/api', 
        postData: {}
      }
    };
    
    ReactToggleComponent.init(domElement, initialStateOn, callback, httpRequests);

    The domElement parameter represents the html element the component will be injected into. The initialState parameter is a boolean representing initial state of the toggle button. The callback accepts a data object containing the response data. The httpRequests variable contains 2 objects, one for the on state, and the other for the off state, each accepting their own url and post data object.

    Options

    The options are used to override styles, and add a text label. You can set the toggle button options on init: ReactToggleComponent.init(domElement, initialState, callback, httpRequests, opts);.

    The following objects can be set on the options parameter.

    common

    This object applies styles to both the on and off states.

    common: {
      styles: {
        textComponent: { 
          color: '#fff',
          fontSize: '14'
        },
        sliderComponent: { 
          backgroundColor: '#fff' 
        }
      }
    }

    onState

    This object applies styles and a text label only to the on state.

    onState: {
      text: 'In',
      styles: {
        toggleComponent: { 
          backgroundColor: '#d2112e' 
        },
        textComponent: {
          left: '30'
        }
      }
    }

    offState

    This object applies styles and a text label only to the off state.

    offState: { 
      text: 'Out',
      styles: {
        toggleComponent: { 
          backgroundColor: '#000' 
        },
        textComponent: {
          right: '20'
        }
      }
    }

    styles

    The styles object can be set on the common, onState and offState objects, as shown above. It can be used to set styles on the components indepedently. It accepts inline styles based on React formatting. Read more here https://facebook.github.io/react/tips/inline-styles.html.

    styles: {
      toggleComponent: { 
        // inline styles here 
      },
      textComponent: {
        // inline styles here
      },
      sliderComponent: {
        // inline styles here
      }
    }

    Install

    npm i @sanchezjjose/react-toggle-component

    DownloadsWeekly Downloads

    33

    Version

    0.6.0

    License

    MIT

    Last publish

    Collaborators

    • sanchezjjose