https://github.com/thekashey/react-push-channel

🎈Context is to drill props down. React Push Channel to drill props up.
https://github.com/thekashey/react-push-channel

context events props react react-helmet react-side-effect

Last synced: about 1 month ago
JSON representation

🎈Context is to drill props down. React Push Channel to drill props up.

• Host: GitHub
• URL: https://github.com/thekashey/react-push-channel
• Owner: theKashey
• Created: 2018-08-15T12:51:25.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-05-08T12:10:25.000Z (over 4 years ago)
• Last Synced: 2023-08-24T06:33:11.099Z (over 1 year ago)
• Topics: context, events, props, react, react-helmet, react-side-effect
• Language: TypeScript
• Homepage:
• Size: 1.35 MB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-push-channel 

[![Greenkeeper badge](https://badges.greenkeeper.io/theKashey/react-push-channel.svg)](https://greenkeeper.io/)

----

[![NPM](https://nodei.co/npm/react-push-channel.png?downloads=true&stars=true)](https://nodei.co/npm/react-push-channel/) 

Context is to drill props down. React Push Channel drill props up.

# API

#### `createChannel(initialValue, reducer?, initialValueForReducer?)`

creates a channel, with given initialValue(used for typing), and optional reducer.

Reducer will be applied to all stored `messages`, producing the result.

createChannel return an object with 3 fields:

 - `Collector` - to collect all messages. 

    - `callback` - current value will be reported via callback.

    - `[merge]` - enabled reducer on data. Ie merges everything into a single value. Otherwise would return last value.

 - `Push` - put message into the channel

    - any props from initialValue

 - `Pop` - read the current active message. Pop __doesn't remove the message__(ie "pops"). Only `Push` component unmount removes it.

## Use as React-helmet?

```js

import {createChannel} from 'react-push-channel';

const helmet = createChannel({

  title: '',

  description: ''

});

// the root collector

 this.setState({helmet})} // transfer reported info into the state 

  merge                                        // merge all data in reverse order 

>

   

   

// or actually do the job

 document.title=helmet.title} // actually SET THE TITLE! 

  merge                                         

>

   

   

 acc + 1, 0);

 this.setState({locked: !!locked})}>

  

  {locked =>  is {locked?'locked':'unlocked'}

  // ^^ would be 1 and `locked`

  

```

# Licence

 MIT