npm package: @happy-code/react-pipe
Description: react-pipe is a react library - that enables a react applicatoin to easily integrate with @happy-code/pipes built applications
Latest version: 1.0.2

# react-pipe 

## Whats this then?

react-pipe is a react library - that enables a react applicatoin to easily integrate with @happy-code/pipes built applications

It provides easy access to shared context, with hooks and functions to make it super simple to interact with the pipe.

## Installation

```$>npm install @happy-code/react-pipe ```

## Usage
 In your app - it is intentionally similar to Reacts own Context API, you will first want to wrap you app / components with a context provider

 ```javascript

import { PipeProvider } from "react-pipe"


return <PipeProvider>...</PipeProvider>
 ```

 In any child component you are now able to access the shared context.. 

 ```javascript
import { usePipeContext } from "react-pipe"

const myComponent = () => {
    const { counter } = usePipeContext()

    return <p>Count is {counter}</p>
}
 ```

 Each browser session connected to the pipe will be assigned its own uniqule user to identify itself on the network, you may augment this object with app specific data. 
 ```javascript
import { getUser, updateUser } from "react-pipe"

const myComponent = () => {
    const user = getUser()

    useEffect(() => {
        updateUser({
            name: 'Happy'
        })
    }, [])


    return <p>[{user.id}] is called '{user.name}'</p>
}
 ```
 by default the user will be saved in local (session storage)


If your application wants to update the pipe context, you can use the 'modify' function which will preserve any shared keys not specified.. so its a diff!

```javascript
import { modify, usePipeContext } from "react-pipe"

const myComponent = () => {
    const { counter } = usePipeContext()
    return <button onClick={() => modify({ counter: counter + 1 })>Add 1</button>
}
```

If your application needs to signal an event (but not necessarily update context), you may emit events that can be listened to by peers.

```javascript
import { emit, useListener } from "react-pipe"
const MY_EVENT = "MY_EVENT"

const myComponent = () => {
    useListener(MY_EVENT, (peer, payload) => {
        alert(`Peer: [${peer.id}] fired: some ${payload.some}`)
    })

    const doAThing = () => {
        const someData = { some: "data"}
        emit(MY_EVENT, someData)
        alert(`I fired: some ${someData.some}`)
    }
    return <button onClick={doAThing}>Add 1</button>
}
```

The emitting client will not recieve the event.

Pipe configuration @happy-code/pipes can intercept these events and choose weather to prevent the broadcast, it is also able to trigger new event to be broadcast. As such, Silo(ing) or filtering of recipient peers is not necessary, this should be handled on a network level

### example: 

in client app
```javascript
emit("NOTIFY_FRIENDS", { status: 'HAPPY' })
```

Intercepting this event and emiting selected events
```javascript
pipe.intercept("NOTIFY_FRIENDS", (client, data) => {
  getFriends(client.user).forEach(friend => {
      pipe.emit(friend, "FRIEND_UPDATE", data)
  })
  return false; 
});
```
Friend only clients would trigger on 

```javascript
useListener("FRIEND_UPDATE", (peer, payload) => {
    alert(`Friend: [${peer.id}] is now ${payload.status}`)
})
```