atom-lib

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

Name	Type	Default	Description
children [required]	Func	N/A	See below
on [optional]	Bool	false	Determines initial value of toggler

Children Props

Property	Type	Description
on	Bool	The value of current state
toggle	Func	Callback function which toggles on value

<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

Properties	Type	Description
on [optional]	Boolean	Initial value of toggler

import {withToggler} from "atom-lib"
 
function YourComponent({on, toggle}){
    return (
        // ...
    )
}
 
export default withToggler({on: false})(YourComponent)

---

§ <Switchboard>

Props

Name	Type	Default	Description
children [required]	Func	N/A	See below
exclusive [optional]	Bool	false	Determines if switchboard values will be mutually exclusive (Any change in one switch value will result in all other switches being set to the opposite value)
flipped [optional]	Bool	false	Inverts the on values for each switch.
switches [optional]	Object	{}	Initial values for the switchboard. Key values must be boolean.

Children Props

Property	Type	Description
toggleExclusive	Func	Toggles the mutually exclusive setting. When set to false, changes to individual switch values won't affect others.
flipBoard	Func	Inverts the on values for each switch.
exclusive	Bool	Current exclusion state of switchboard.
flipped	Bool	Current flip state of switchboard.
switches	Object	Current switch values for switchboard.

<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

Name	Type	Default	Description
children [required]	Func	N/A	See below
id [required]	String or Number	N/A	Identifies the particular switch across the switchboard

Children Props

Property	Type	Description
on	Bool	The value of current switch state
toggleSwitch	Func	Callback function which toggles on value

<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