simple-react-toggler

    1.0.0 • Public • Published

    react-toggler

    react-toggler is a reusable toggle component. You can use it instead of building a custom toggle.

    Table of Contents

    1. Installation
    2. Usage
    3. Examples

    Installation

    npm install acq-components --save

    Usage

    The Toggle component follows the render prop pattern.

    Toggle exposes three features to the user:

    toggled is a boolean value that determines whether the Toggle is true or false.

    toggleContent is a function that toggles between true and false.

    To pass children to the component, that can access toggled and toggleContent, you can add a toggleProp to the <Toggle> like this:

    <Toggle toggleProp={() => {}}>
    

    Inside of that toggleProp, you can pass the children and the arguments that Toggle exposes, which are toggled and toggleContent:

    <Toggle toggleProp={( // arguments go in here ) => {
      // children go in here
    }}>
    
    <Toggle toggleProp={({toggled, toggleContent}) => {
      return (
        <div>
          <button onClick={toggleContent} />
          <div toggled={toggled}>
        <div>
      )
    }}>
    

    Examples

    Here's a real world example:

    import { Toggle } from 'acq-components';
    
    class App extends React.Component {
      render() {
        <Toggle
          toggled={false}
          toggleProp={({ toggled, toggleContent }) => (
            <div>
              {toggled ? <h1>On</h1> : <h2>Off</h2>}
              <button onClick={toggleContent}>Click Me</button>
            </div>
          )}
        />
      }
    }
    
    

    Contributors

    Install

    npm i simple-react-toggler

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    9.01 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar