diff --git a/README.md b/README.md
index f07f94e..444084f 100644
--- a/README.md
+++ b/README.md
@@ -19,8 +19,9 @@ npm install --save @bit-about/event
- 100% **Idiomatic React**
- 100% Typescript with event types deduction
- Efficient and hook-based
+- ...with static listener and dispatcher
- No centralized event provider
-- Tiny - only **100KB**
+- Tiny - only **2kB**
- **Just works** ™
## Usage
@@ -40,7 +41,7 @@ const [EventProvider, useEvent] = events({
```jsx
const App = () => (
-> - define events with payloads using `events()`
-> - wrap the components tree with the generated `EventProvider`
-> - listen on events with **useEvent hook**
-> - dispatch events with **useEvent hook**
+## Static access
+The third element of the `events()` result tuple is object which provides access in static manner (without hook).
+
+```jsx
+const [AppEventProvider, useAppEvent, appEvent] = events(...)
+```
+
+and then
+```jsx
+// 💪 Get substate
+appEvent.dispatch('buttonClicked', 'Hello Allice!')
+
+// 🤌 Subscribe and listen on new events
+const subscriber = appEvent.subscribe({
+ buttonClicked: (payload: string) => console.log(payload)
+})
+
+// remember to unsubscribe!
+subscriber.unsubscribe()
+```
## 👉 Rerendering
Neither listeners nor event dispatching rerender the component.
@@ -82,14 +98,14 @@ The component will only be rerendered if its state is explicitly changed (in e.g
```jsx
const Component = () => {
- const [message, setMessage] = React.useState("")
+ const [message, setMessage] = React.useState('')
useEvent({
- aliceClicked: () => console.log("I DON'T rerender this component!"),
- bobClicked: () => setMessage("I DO rerender this component!")
+ aliceClicked: () => console.log('I DO NOT rerender this component!'),
+ bobClicked: () => setMessage('I DO rerender this component!')
})
- // ...
+ return
{message}
} ``` @@ -98,52 +114,21 @@ Events in `events()` are actually payload middlewares. ```jsx const [EventProvider, useEvent] = events({ - buttonClicked: (payload: string) => `Hello ${message}!`, + buttonClicked: (payload: string) => `Hello ${message}!`, // Transforms string payload to another + avatarClicked: () => `Bob!`, // Provides default payload }) -``` -```jsx -const dispatchEvent = useEvent({ - buttonClicked: (payload: string) => console.log(payload) // "Hello Alice!" +const dispatch = useEvent({ + buttonClicked: (payload: string) => console.log(payload), // "Hello Alice!", + avatarClicked: (payload: string) => console.log(payload), // "Bob!" }) -dispatchEvent('buttonClicked', "Alice") +dispatch('buttonClicked', 'Alice') +dispatch('avatarClicked') ``` > NOTE: