N00b's Programming Machine

    @mathdoy/toggle-react

    1.1.2 • Public • Published

    Toggle React

    Toggle React library for toggle

    Installation

    $ npm install --save @mathdoy/toggle @mathdoy/toggle-react
    import React from "react";
    import ReactDOM from "react-dom";
    import { createToggle } from "@mathdoy/toggle";
    import { ToggleProvider } from "@mathdoy/toggle-react";
    import "./index.css";
    import App from "./App";
    
    const toggle = createToggle({
      features: {
        logo: false,
        foo: true,
        // ...features
      },
    });
    
    ReactDOM.render(
      <ToggleProvider toggle={toggle}>
        <App />
      </ToggleProvider>,
      document.getElementById("root")
    );

    Then in your components files

    import React, { Component } from "react";
    import { Toggle } from "@mathdoy/toggle-react";
    import FeatureDisable from "./FeatureDisable";
    
    // ...
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <Toggle isEnabled="logo" disableComponent={<FeatureDisable />}>
                <img src={logo} className="App-logo" alt="logo" />
              </Toggle>
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
    }
    
    export default App;

    You can also bind toggle into your component props with withToggle

    import {
      ToggleProvider,
      withToggle,
      togglePropType,
    } from "@mathdoy/toggle-react";
    
    // ...
    
    class App extends Component {
      static propTypes = {
        toggle: togglePropType.isRequired,
      };
    
      render() {
        const { toggle } = this.props;
    
        return (
          <div className="App">{toggle.isEnabled("foo") && <div>foo</div>}</div>
        );
      }
    }
    
    export default withToggle(App);

    For more information on toggle

    For more information on toggle see toggle

    Using it with restify

    $ npm install --save @mathdoy/toggle @mathdoy/toggle-restify

    See more information for toggle-restify

    License

    Toggle is licensed under the MIT License.

    Install

    npm i @mathdoy/toggle-react

    DownloadsWeekly Downloads

    2

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    23.7 kB

    Total Files

    23

    Last publish

    Collaborators

    • mathdoy-user