treble-hook

Simple lightweight state management in React.

IMPORTANT: Upgrading from v1 to v2 includes breaking changes; see docs for more info.

 

Installation

yarn add treble-hook

or

npm install --save treble-hook

Usage

import trebleHook, { usePubSub } from 'treble-hook'

const Welcome = () => {
  const [guestName] = usePubSub('guest')

  return (
    <h3>Welcome to treble-hook, {guestName}!</h3>
  )
}

const GuestEntry = () => {
  const [_, pubGuestName] = usePubSub('guest')

  return (
    <div>
      <input
        type="text"
        onChange={(e) => { pubGuestName(e.target.value) }}
      />
    </div>
  )
}

const App = () => {

  trebleHook.addTopic('guest', 'amigo')

  const GuestPublisher = trebleHook.getPublisher()

  return (
    <GuestPublisher>
      <GuestEntry />
      <br />
      <Welcome />
    </GuestPublisher>
  )
}

API

See docs for API.

Codesandbox Examples

Guest Sign-in Classic ToDo App Crack that Code Game

Defacto ToDo App Example

App.jsx

import React from 'react'
import trebleHook from 'treble-hook'
import AddToDo from './AddToDo'
import ToDoList from './ToDoList'
import Footer from './Footer'

trebleHook.addTopic('todos', [])
trebleHook.addTopic('filter', 'all')

const ToDoPublisher = trebleHook.getPublisher()

export default function App() {
  return (
    <ToDoPublisher>
      <AddToDo />
      <ToDoList />
      <Footer />
    </ToDoPublisher>
  )
}

ToDoList.jsx

import React from 'react'
import { usePubSub } from 'treble-hook'
import ToDo from './todo'

export default function ToDoList() {
  const [todos, pubToDos] = usePubSub('todos')
  const [filter] = usePubSub('filter')

  const filteredToDos = todos.filter((todo) => {
    switch (filter) {
      case 'completed': return todo.completed
      case 'active': return !todo.completed
      default: return true
    }
  })

  return (
    <ul>
      {filteredToDos.map(todo =>
        <ToDo
          key={todo.id}
          {...todo}
          onClick={() => {
            todo.completed = !todo.completed
            pubToDos([...todos])
          }}
        />
      )}
    </ul>
  )
}

ToDo.jsx

import React from 'react'
import { usePubSub } from 'treble-hook'

export default function ToDo({ todo }) {
  const [todos, pubToDos] = usePubSub('todos')
  const [filter] = usePubSub('filter')

  const filteredToDos = todos.filter((todo) => {
    switch (filter) {
      case 'completed': return todo.completed
      case 'active': return !todo.completed
      default: return true
    }
  })

  return (
    <ul>
      {filteredToDos.map(todo =>
        <ToDo
          key={todo.id}
          {...todo}
          onClick={() => {
            todo.completed = !todo.completed
            pubToDos([...todos])
          }}
        />
      )}
    </ul>
  )
}

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