atom-lib v1.1.2

ReactJS Container Library

Reusable container components for common React features/functionalities

Install

npm install --save atom-lib

Usage

    import {
    Toggler,
    withToggler, 
    SwitchBoard,
    ... 
    } from "atom-lib";

Container API Reference

Containers are components that have some sort of reusable functionality. Internal state/methods are exposed mainly via children props unless otherwise stated. The children function must always return either a React element or a React component. A corresponding HOC is also provided unless otherwise stated.

§ <Toggler>

Props

Children Props

<Toggler on>
    {({on, toggle}) => (
        <div>
            <button onClick={toggle}>{on ? "ON" : "OFF"}</button>
        </div>
    )}
</Toggler>

§ withToggler

Will expose the toggle and on values from above as props to the specified component.

withToggler(config)(component)

config

import {withToggler} from "atom-lib"

function YourComponent({on, toggle}){
    return (
        // ...
    )
}

export default withToggler({on: false})(YourComponent)

§ <Switchboard>

Props

Children Props

<Switchboard exclusive>
    {({ flipBoard, toggleExclusive, flipped, exclusive, switches }) => (
      <div>
        <Switch id={"a"}>
          {({ on, toggleSwitch }) => (
            <a style={{
              textDecoration: on ? "underline" :
                "none"
            }} onClick={toggleSwitch}>A</a>
          )}
        </Switch>
        <Switch id={"b"}>
          {({ on, toggleSwitch }) => (
            <a style={{
              textDecoration: on ? "underline" :
                "none"
            }} onClick={toggleSwitch}>B</a>
          )}
          <button onClick={toggleExclusive}>{exclusive ? "Set back to Inclusive" : "Set back to exclusive"}</button>
          <button onClick={flipBoard}>{flipped ? "Reset" : "Invert"}</button>
          <p>Currently, {Object.keys(switches).reduce((total, sw) => switches[sw] ? total + 1 : total, 0)} switches are ON</p>
        </Switch>
      </div>
    )}
  </Switchboard>

§ withSwitchboard

Will expose the children prop values from above as props to the specified component.

withSwitchboard(config)(component)

config accepts the same key-value pairs as the props object to Switchboard except for children.

import {withToggler} from "atom-lib"

function YourComponent({on, toggle}){
    return (
        // ...
    )
}

export default withToggler({on: false})(YourComponent)

§ <Switch>

Switch components must be rendered within a Switchboard component. They are responsible for toggling and containing a particular switch value.

Props

Children Props

<Switch id="a">
    {({on, toggleSwitch}) => (
        <div>
            <button onClick={toggleSwitch}>{on ? "ON" : "OFF"}</button>
        </div>
    )}
</Switch>

§ withSwitch

Will expose the children prop values from above as props to the specified component. Must be rendered within a Switchboard component.

withSwitch(config)(component)

config Properties | Type | Description --- | --- | --- id required |String or Number | Identifies the particular switch across the switchboard

const linkComponents = links.map((content, i) => (
    createElement(withSwitch({ id: i })(NavLink), { key: i }, content)
  ))

Changelog

• 10/14 - Added Toggler, withToggler, Switchboard, and withSwitchboard

Upcoming

• Loader, Error Handler, SortFilter