New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

treble-hook

Package Overview
Dependencies
Maintainers
6
Versions
66
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

treble-hook - npm Package Compare versions

Comparing version

2.0.0
to
2.0.1

2

package.json
{
"name": "treble-hook",
"version": "2.0.0",
"version": "2.0.1",
"description": "Get hooked on simple subscribe-and-publish in ReactJS.",

@@ -5,0 +5,0 @@ "main": "./lib/index.js",

226

README.md

@@ -5,6 +5,6 @@

<h3>
<i>Simple lightweight state management in React.</i>
<i>Simple, lightweight state management library for ReactJS with zero dependencies, weighing in at just under 900 bytes (gzip).</i>
</h3>
<br />
<h3 style={{ color: 'red' }}>IMPORTANT: Upgrading from v1 to v2 includes breaking changes; see docs for more info.</h3>
<h3 style={{ color: 'red' }}>IMPORTANT: Upgrading from v1 to v2 includes breaking changes; see API below for new interfaces.</h3>
<br />

@@ -31,3 +31,3 @@ <div style="float:left;">

## Usage
## Quick Start

@@ -37,12 +37,14 @@ ```jsx

const Welcome = () => {
// Welcome.jsx
export default function Welcome() {
const [guestName] = usePubSub('guest')
return (
<h3>Welcome to treble-hook, {guestName}!</h3>
<h3>Welcome to treble-hook, {guestName || ''}!</h3>
)
}
const GuestEntry = () => {
const [_, pubGuestName] = usePubSub('guest')
// GuestEntry.jsx
export default function GuestEntry() {
const [, pubGuestName] = usePubSub('guest')

@@ -59,5 +61,6 @@ return (

const App = () => {
// App.jsx
export default function App() {
trebleHook.addTopic('guest', 'amigo')
trebleHook.addTopic('guest', '')

@@ -76,185 +79,118 @@ const GuestPublisher = trebleHook.getPublisher()

## API
## Live Examples on Codesandbox
See docs for API.
- [Welcome](https://codesandbox.io/s/treble-hook-welcome-4ynvt) (Quick Start code)
- Classic ToDo App (coming soon)
- Crack that Code Game (coming soon)
## Codesandbox Examples
# API
Guest Sign-in
Classic ToDo App
Crack that Code Game
## <ins>trebleHook.addTopic()<ins>
Adds a new topic that can be published and subscribed to.
## Defacto ToDo App Example
```ts
addTopic<T>(topicName: string, defaultValue: T, initWithSessionStorage = false): void
```
- `topicName` 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.
### App.jsx
<ins>Example:</ins>
```tsx
import React from 'react'
```ts
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>
)
}
trebleHook.addTopic<number>('apples', 25)
trebleHook.addTopic<number>('organges', 42)
trebleHook.addTopic<number>('carrots', 100)
```
### ToDoList.jsx
## <ins>trebleHook.getPublisher()</ins>
```tsx
import React from 'react'
import { usePubSub } from 'treble-hook'
import ToDo from './todo'
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).
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>
)
}
```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.
### ToDo.jsx
<ins>Example:</ins>
```tsx
import React from 'react'
import { usePubSub } from 'treble-hook'
import trebleHook from 'treble-hook'
export default function ToDo({ todo }) {
const [todos, pubToDos] = usePubSub('todos')
const [filter] = usePubSub('filter')
const FruitCountPublisher = trebleHook.getPublisher(['apples', 'oranges'])
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>
)
}
return (
<App>
<FruitCountPublisher>
<FruitStand />
</FruitCountPublisher>
</App>
)
```
## <ins>usePubSub</ins>
A React hook that subscribes a component to a topic. 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
usePubSub<T>(topic: string): PubSubTuple<T>
```
- `topic` is the unique topic name to subscribe to.
<ins>Example:</ins>
Contrived sign-in component along with component that displays active user (signed-in user).
```tsx
import React, { ChangeEvent, useState } from 'react'
import React from 'react'
import { usePubSub } from 'treble-hook'
const ACTIVE_USER_TOPIC = 'active-user'
function FruitTable() {
const [apples] = usePubSub<number>('apples')
const [oranges] = usePubSub<number>('oranges')
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>
<h3>Apple count: {apples}</h3>
<h3>Orange count: {oranges}</h3>
</div>
)
}
function ActiveUser() {
function FruitVendor() {
const [apples, pubApples] = usePubSub<number>('apples')
const [oranges, pubOranges] = usePubSub<number>('oranges')
// 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 }
<button
disabled={apples === 0}
onClick={() => {
pubApples(apples - 1)
}}
>
Sell an apple
</button>
<button
disabled={oranges === 0}
onClick={() => {
pubOranges(oranges - 1)
}}
>
Sell an orange
</button>
</div>
)
}
function FruitStand() {
<FruitTable />
<FruitVendor />
}
```
## Documentation
### See the [Treble-Hook Wiki](https://github.com/igneous-systems/treble-hook/wiki) for API documentation and more.
## Live Codesandbox Examples
* [Sign-in README example](https://codesandbox.io/s/treble-hook-sign-in-example-ftsbx)
* [Crack That Code! game](https://codesandbox.io/s/treble-hook-presents-crack-that-code-vxcx1)
## Authors
Brought to you by the engineering team at [Igneous](https://www.igneous.io). Speaking of, we're always on the lookout for fun-loving, passionate engineers; visit [Igneous culture and careers](https://www.igneous.io/culture-and-careers) to learn more.
## Liscense
### MIT