reinbox

reinbox

Declarative topic based notification UI manager for React (Native).
If you want to use reinbox with Redux, you can use reinbox-redux.

Install

npm install reinbox

Usage

import { Provider, Inbox, withPublish } from "reinbox";

const TOPIC = "test";

const Button = ({ publish }) => (
  <button onClick={() => publish(TOPIC, { id: "xxx", message: "notify me" })}>
    notify
  </button>
);
const PublishButton = withPublish(Button);

const App = () => (
  <Provider>
    <div>
      <PublishButton />
    </div>
    <Inbox topic={TOPIC}>
      {({ payload, dismiss }) =>
        payload && (
          <div>
            <span>{payload.message}</span>
            <button onClick={dismiss}>dismiss</button>
          </div>
        )
      }
    </Inbox>
  </Provider>
);

API

<Inbox />

<Inbox topic="test">
  {({ payload, dismiss }) =>
    payload && (
      <div>
        <span>{payload.message}</span>
        <button onClick={dismiss}>dismiss</button>
      </div>
    )
  }
</Inbox>

prop name	required	description
topic	Yes	Topic name you want to receive message
childrenn	Yes	Render notification message. When there is no message, payload is null

Development

git clone [e-mail]:Leko/reinbox.git
cd reinbox
npm i
npx lerna bootstrap

License

This package under MIT license.