@wildberries/notifications

@wildberries/notifications

Sollution for notifications, connected with redux

Examples of usage

Installation

npm install @wildberries/notifications

Connect to your root reducer

import {
  notificationsState,
  NOTIFICATIONS_REDUCER_NAME,
} from '@wildberries/notifications';

export const rootReducer = {
  [NOTIFICATIONS_REDUCER_NAME]: notificationsState,
  ...other root reducers
};

Insert the Notifications component into your project

import React, { memo } from "react";
import { Notifications } from "@wildberries/notifications";

const TestComponent = memo(() => (
    <div className="TestComponent">
        <Notifications />
    </div>
  );
})

Dispatch setModalAction to add notifications modal

SetModalAction params:

• status - success | error - modal status (required)
• text - string - modal test (required)
• additionalPayload - string - payload of additional action if need to call from modal (not required)
• additionalActionType - any - type of additional action if need to call from modal (not required)

import React from "react";
import { setModalAction } from "@wildberries/notifications";
import { useDispatch } from "react-redux";

function ExampleComponent() {
  const dispatch = useDispatch();

  const setModal = () => {
    dispatch(setModalAction({
      status: 'success',
      title: 'modal title',
      text: 'modal text',
      additionalPayload: { foo:'bar' }, 
      additionalActionType: 'SOME_TYPE',
    }))
  }

  return (
    <div className="ExampleComponent">
        <button onClick={setModal}>button</button>
    </div>
  );
}

export default App;

Storybook

Direct

npm start

In Docker

This option will be useful if you are using a node version 16 or higher and are not going to update the lockfile.

docker compose up --build