treble-hook - npm Package Compare versions

Comparing version 2.0.0-alpha.8 to 2.0.0

package.json

 {
   "name": "treble-hook",
-  "version": "2.0.0-alpha.8",
+  "version": "2.0.0",
   "description": "Get hooked on simple subscribe-and-publish in ReactJS.",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

 
 <div>
   <img height="180" alt='treble-hook' src='https://raw.githubusercontent.com/rollercodester/treble-hook/master/doc-assets/treble-hook-3.png'/>
-  <p>
-    <i>Super easy way to get "hooked" on subscribe-and-publish in React with no dependencies and no cruft.</i>
-  </p>
+    <h3>
+    <i>Simple lightweight state management in React.</i>
+  </h3>
   <br />
+  <h3 style={{ color: 'red' }}>IMPORTANT: Upgrading from v1 to v2 includes breaking changes; see docs for more info.</h3>
+  <br />
   <div style="float:left;">
@@ -18,7 +20,6 @@ <a href="https://www.npmjs.com/package/treble-hook" rel="nofollow"><img src="https://img.shields.io/npm/v/treble-hook.svg?style=flat" alt="version"></a>
 
+<p></p>
 
-## Quick Start
+## Installation
 
-### Installation
-
 `yarn add treble-hook`
@@ -30,4 +31,158 @@
 
-### Usage
+## Usage
 
+```jsx
+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
+
+```tsx
+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
+
+```tsx
+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
+
+```tsx
+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).
@@ -34,0 +189,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15698

increased by20.68%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

256

increased by153.47%

No dependency changes