treble-hook

Super easy way to get "hooked" on subscribe-and-publish in React with no dependencies and no cruft.

 

Quick Start

Installation

yarn add treble-hook

or

npm install --save treble-hook

Usage

Contrived sign-in component along with component that displays active user (signed-in user).

import React, { ChangeEvent, useState } from 'react'
import { usePubSub } from 'treble-hook'

const ACTIVE_USER_TOPIC = 'active-user'

function SignIn() {

  // publishUser will do just that, publish the value
  // to all subscribers of the ACTIVE_USER_TOPIC
  const [_, publishUser] = usePubSub<string>(ACTIVE_USER_TOPIC, '')
  const [entered, setEntered] = useState<string>('')

  return (
    <div>
      <input
        type='text'
        onChange={
          (evt: ChangeEvent<HTMLInputElement>) => {
            setEntered(evt.target.value)
          }
        }
      />
      <button onClick={ () => { publishUser(entered) }}>Sign-in</button>
    </div>
  )

}

function ActiveUser() {

  // this subsribes the component to the ACTIVE_USER_TOPIC and
  // whenever the active user is published (from anywhere in the
  // app) it will get updated here. Also, this component doesn't
  // have to wait for the next publish, it will intialize with
  // the last published value or default to 'Anonymous' otherwise
  const [activeUser] = usePubSub<string>(
    ACTIVE_USER_TOPIC,
    'Anonymous'
  )

  return (
    <div>
      Active user: { activeUser }
    </div>
  )

}

Documentation

See the Treble-Hook Wiki for API documentation and more.

Live Codesandbox Examples

• Sign-in README example
• Crack That Code! game

Authors

Brought to you by the engineering team at Igneous. Speaking of, we're always on the lookout for fun-loving, passionate engineers; visit Igneous culture and careers to learn more.

Liscense

MIT