simple-react-toggler

react-toggler

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

Table of Contents

• Installation
• Usage
• 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

• Basic Demo

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

• Mae Capozzi