React Toggle Button Component

Toggle Button Component.

(powered by React and jQuery)

A toggle button which makes http requests asynchonously. It is written as a React component, and is published to npm. It is simple to initialize on the page, and fully customizable. You simply pass it the dom element which will wrap the component, the initial state of the toggle button, an http request object containing the resource URI, and a callback that will do something with the data returned from the server. You can even fully customize the text, look and feel with a simple options argument! See below for usage examples.

Toggle button on

This is a basic example, with no customization. It's what you get out of the box, with the default color scheme and no text indicator. The state in this example is set to active, so the component is turned on.


  const reactToggleComponent = require('react-toggle-component');
  const domElement = document.getElementById('react-toggle-component');
  const isActive = true;
  const httpRequests = {
    onState: {
      url: 'https://randomuser.me/api',
      postData: {}
    },

    offState: {
      url: 'https://randomuser.me/api',
      postData: {}
    }
  };

  function callback(data) {
    console.log(data);
  };

  reactToggleComponent.init(domElement, isActive, callback, httpRequests);

Toggle button off

This is a basic example, with no customization. It's what you get out of the box, with the default color scheme and no text indicator. The state in this example is set to inactive, so the component is turned off.


  const reactToggleComponent = require('react-toggle-component');
  const domElement = document.getElementById('react-toggle-component');
  const isActive = false;
  const httpRequests = {
    onState: {
      url: 'https://randomuser.me/api',
      postData: {}
    },

    offState: {
      url: 'https://randomuser.me/api',
      postData: {}
    }
  };

  function callback(data) {
    console.log(data);
  };

  reactToggleComponent.init(domElement, isActive, callback, httpRequests);

Toggle button with text label

Here you see how to pass an options argument containing an object for the on and off state text label. Try to toggle the button to see both labels.


  const reactToggleComponent = require('react-toggle-component');
  const domElement = document.getElementById('react-toggle-component');
  const isActive = false;
  const httpRequests = {
    onState: {
      url: 'https://randomuser.me/api',
      postData: {}
    },

    offState: {
      url: 'https://randomuser.me/api',
      postData: {}
    }
  };
  
  const opts = {
    onState: {
      text: 'On'
    },

    offState: { 
      text: 'Off'
    }
  };
  
  function callback(data) {
    console.log(data);
  };

  reactToggleComponent.init(domElement, isActive, callback, httpRequests, opts);

Toggle button styling

Here is an example of how you can change the styles of each individual component of the toggle button. You can alter the text, slider and button individually, for both on and off states.


  const reactToggleComponent = require('react-toggle-component');
  const domElement = document.getElementById('react-toggle-component');
  const isActive = false;
  const httpRequests = {
    onState: {
      url: 'https://randomuser.me/api',
      postData: {}
    },

    offState: {
      url: 'https://randomuser.me/api',
      postData: {}
    }
  };
  
  const opts = {
    common: {
      styles: {
        textComponent: { 
          color: '#fff',
          fontSize: '14'
        },
        sliderComponent: { 
          backgroundColor: '#fff' 
        }
      }
    },

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

    offState: { 
      text: 'Out',
      styles: {
        textComponent: {
          right: '20'
        },
        toggleComponent: { 
          backgroundColor: '#000' 
        }
      }
    }
  };
  
  function callback(data) {
    console.log(data);
  };

  reactToggleComponent.init(domElement, isActive, callback, httpRequests, opts);

Slider transition, and button styling

This example shows a different style, color scheme, and faster, snappier transition between the on and off states.


  const reactToggleComponent = require('react-toggle-component');
  const domElement = document.getElementById('react-toggle-component');
  const isActive = false;
  const httpRequests = {
    onState: {
      url: 'https://randomuser.me/api',
      postData: {}
    },

    offState: {
      url: 'https://randomuser.me/api',
      postData: {}
    }
  };
  
  const opts = {
    common: {
      styles: {
        toggleComponent: {
          width: '80'
        },
        sliderComponent: { 
          height: '30',
          top: '4',
          msTransition: 'transform 0.1s ease',
          MozTransition: 'transform 0.1s ease',
          WebkitTransition: '-webkit-transform 0.1s ease',
          width: '30'
        }
      }
    },

    onState: {
      styles: {
        toggleComponent: {
          backgroundColor: '#38677e'
        },
        sliderComponent: { 
          left: '5',
          msTransform: 'translate(40px, 0px)',
          MozTransform: 'translate(40px, 0px)',
          WebkitTransform: 'translate(40px, 0px)'
        }
      }
    },

    offState: { 
      styles: {
        toggleComponent: {  
          backgroundColor: '#bbb'
        },
        sliderComponent: { 
          left: '3'
        }
      }
    }
  };
  
  function callback(data) {
    console.log(data);
  };

  reactToggleComponent.init(domElement, isActive, callback, httpRequests, opts);