Get hooked on simple subscribe-and-publish in ReactJS.

``diff`
- IMPORTANT: Upgrading from v1 to v2 includes breaking changes; see API below for new interfaces.
yarn add treble-hook
or
npm install --save treble-hook
`jsx
import trebleHook, { usePub, useSub } from 'treble-hook'
// Welcome.jsx
export default function Welcome() {
const guestName = useSub('guest')
return (
// GuestEntry.jsx
export default function GuestEntry() {
const pubGuestName = usePub('guest')
return (
// App.jsx
export default function App() {
trebleHook.addTopic('guest', '')
const GuestPublisher = trebleHook.getPublisher()
return (
)
}
`
- Welcome (Quick Start example with Typescript + Material-UI)
- Classic ToDo App
- Code Cracker Game (coming soon)
Adds a new topic that can be published and subscribed to.
`ts`
addTopictopicName
- is the identifier for the topic and must be unique within the application.defaultValue
- will be used as the initial state value for respective topic.initWithSessionStorage
- determines whether to retrieve the topic's initial state from session storage. If true, then all subsequent published state changes will also be stored in sessions state for the app. This is helpful to ensure consistent state between any routes that require hard reloads.
Example:
`ts
import trebleHook from 'treble-hook'
trebleHook.addTopic('apples', 25)
trebleHook.addTopic('organges', 42)
trebleHook.addTopic('carrots', 100)
`
Returns a TrebleHookPublisher JSX element that manages publications for given topics. The Publisher JSX should be placed high in the component tree (ancestral to all components that interact with the respective publisher state).
`ts`
getPublisher(topics?: string[]): TrebleHookPublisher (JSX.Element)topics
- is the array of topic names contextual to this publisher that have been added using the addTopic method. If no topics are passed in then all topics will be included in the returned publisher.
Example:
`tsx
import React from 'react'
import trebleHook from 'treble-hook'
const FruitCountPublisher = trebleHook.getPublisher(['apples', 'oranges'])
return (
)
`
A hook that subscribes a component to a topic with capability to publish. The hook returns a tuple that is similar to the tuple returned from useState where the first element is the topic's current state value and the second element is the method to publish a new state value for the topic.
`ts`
usePubSubtopic
- is the unique topic name to subscribe to.
Example:
`tsx
import React from 'react'
import { usePubSub } from 'treble-hook'
function FruitTable() {
const [apples] = usePubSub
const [oranges] = usePubSub
return (
function FruitVendor() {
const [apples, pubApples] = usePubSub
const [oranges, pubOranges] = usePubSub
return (
function FruitStand() {
}
`
A hook returning a function that publishes to a topic.
IMPORTANT: Even though this hook only returns the publish function, it will still cause a re-render whenever a value for respective topic is published outside the scope of this component (i.e. when published from another component).
`ts`
usePub
Example:
`tsx
import { usePub } from 'treble-hook'
function FruitVendor() {
const pubApples = usePub
return (
useSub
A hook returning a function that subscribes to a topic.
`ts
useSub(topic: string): T
`Example:
`tsx
import { useSub } from 'treble-hook'function FruitVendor() {
const apples = useSub('apples')
return (
Apply quantity: {apples}
)
}
``