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 [email protected]:Leko/reinbox.git
cd reinbox
npm i
npx lerna bootstrap

License

This package under MIT license.