2.1.16 • Published 6 months ago

@ttoss/react-notifications v2.1.16

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

@ttoss/react-notifications

About

This module provides a simple way to show notifications in your application using ttoss ecosystem.

Installation

pnpm add @ttoss/notifications @ttoss/components @ttoss/react-icons @ttoss/ui @emotion/react

Getting Started

Provider

Add a provider on top of your application and set Modal app element.

import { NotificationsProvider } from '@ttoss/react-notifications';
import { ThemeProvider } from "@ttoss/ui";
import { Modal } from "@ttoss/components";

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider>
      <NotificationsProvider>
        <App />
      </NotificationsProvider>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')

Modal.setAppElement('#root');

Loading

This modules provides a global loading bar that you can use on every part of your App.

import { useNotifications } from '@ttoss/react-notifications';
import { Box, Button } from '@ttoss/ui';

const Component = () => {
  const { loading, setLoading } = useNotifications();

  return (
    <Box>
      <Button onClick={() => setLoading(true)} disabled={isLoading}>
        Click Me!
      </Button>
    </Box>
  );
};

Modal

Set viewType to modal to show a modal notification.

import { useNotifications } from '@ttoss/react-notifications';
import { Box, Button } from '@ttoss/ui';

const Component = () => {
  const { addNotification } = useNotifications();

  return (
    <Box>
      <Button
        onClick={() =>
          addNotification({
            message: "I'm a notification",
            type: 'info',
            viewType: 'modal',
          })
        }
      >
        Click Me!
      </Button>
    </Box>
  );
};

Toast

Set viewType to toast to show a toast notification.

import { useNotifications } from '@ttoss/react-notifications';
import { Box, Button } from '@ttoss/ui';

const Component = () => {
  const { addNotification } = useNotifications();

  return (
    <Box>
      <Button
        onClick={() =>
          addNotification({
            message: "I'm a notification",
            type: 'info',
            viewType: 'toast',
          })
        }
      >
        Click Me!
      </Button>
    </Box>
  );
};

NotificationsBox

You can use NotificationsBox to show the notifications in a specific place. You can render as many NotificationsBox as you want in your application.

import { NotificationsBox } from '@ttoss/react-notifications';
import { Box } from '@ttoss/ui';

const Component = () => {
  return (
    <Box>
      <NotificationsBox />
    </Box>
  );
};

const App = () => {
  return (
    <Box>
      <NotificationsBox />
      <Component />
    </Box>
  );
};

In the example above, both NotificationsBox will show the notifications.

To render the notifications in a specific NotificationsBox, you can set the boxId in the notification, which is the id of the NotificationsBox you want to show the notification.

import { useNotifications, NotificationsBox } from '@ttoss/react-notifications';
import { Box, Button } from '@ttoss/ui';

const Component = () => {
  const { addNotification , NotificationsBox } = useNotifications();

  return (
    <Box>
      <NotificationsBox id="my-box" />
      <Button
        onClick={() =>
          addNotification({
            message: "I'm a notification",
            type: 'info',,
            boxId: 'my-box',
          })
        }
      >
        Click Me!
      </Button>
    </Box>
  );
};

Recommendation

"You can place the NotificationsBox component at the root of your application to handle notifications rendering automatically, eliminating the need to manage it manually elsewhere. If you need a specific NotificationsBox, simply render the NotificationsBox in the desired location and use the boxId property to differentiate it."

License

MIT

2.1.16

6 months ago

2.1.14

6 months ago

2.1.15

6 months ago

2.1.13

6 months ago

2.1.12

7 months ago

2.1.9

7 months ago

2.1.10

7 months ago

2.1.11

7 months ago

2.1.4

7 months ago

2.1.6

7 months ago

2.1.5

7 months ago

2.1.8

7 months ago

2.1.7

7 months ago

2.1.3

7 months ago

1.24.72

8 months ago

1.24.71

8 months ago

2.1.2

8 months ago

2.1.1

8 months ago

2.1.0

8 months ago

1.24.69

8 months ago

1.24.67

8 months ago

1.24.68

8 months ago

1.24.66

8 months ago

1.24.70

8 months ago

1.24.65

8 months ago

1.24.63

8 months ago

1.24.64

8 months ago

1.24.62

8 months ago

1.24.61

9 months ago

1.24.60

9 months ago

1.24.59

9 months ago

1.24.58

11 months ago

1.24.56

11 months ago

1.24.57

11 months ago

1.24.49

12 months ago

1.24.47

1 year ago

1.24.48

1 year ago

1.24.54

12 months ago

1.24.55

12 months ago

1.24.52

12 months ago

1.24.53

12 months ago

1.24.50

12 months ago

1.24.51

12 months ago

1.24.45

1 year ago

1.24.46

1 year ago

1.24.44

1 year ago

1.24.43

1 year ago

1.24.41

1 year ago

1.24.42

1 year ago

1.24.40

1 year ago

1.24.39

1 year ago

1.24.38

1 year ago

1.24.37

1 year ago

1.24.36

1 year ago

1.24.35

1 year ago

1.24.34

1 year ago

1.24.32

1 year ago

1.24.33

1 year ago

1.24.31

1 year ago

1.24.30

1 year ago

1.24.29

2 years ago

1.24.27

2 years ago

1.24.28

2 years ago

1.24.26

2 years ago

1.24.25

2 years ago

1.24.24

2 years ago

1.24.23

2 years ago

1.24.22

2 years ago

1.24.21

2 years ago

1.24.19

2 years ago

1.24.20

2 years ago

1.22.26

2 years ago

1.22.25

2 years ago

1.22.24

2 years ago

1.22.23

2 years ago

1.23.0

2 years ago

1.23.1

2 years ago

1.24.18

2 years ago

1.24.16

2 years ago

1.24.17

2 years ago

1.24.14

2 years ago

1.24.15

2 years ago

1.24.12

2 years ago

1.24.13

2 years ago

1.24.10

2 years ago

1.24.11

2 years ago

1.24.1

2 years ago

1.24.2

2 years ago

1.24.0

2 years ago

1.24.5

2 years ago

1.24.6

2 years ago

1.24.3

2 years ago

1.24.4

2 years ago

1.24.9

2 years ago

1.24.7

2 years ago

1.24.8

2 years ago

1.22.19

2 years ago

1.22.22

2 years ago

1.22.21

2 years ago

1.22.20

2 years ago

1.22.17

2 years ago

1.22.16

2 years ago

1.22.15

2 years ago

1.22.14

2 years ago

1.22.13

2 years ago

1.22.12

2 years ago

1.22.11

2 years ago

1.22.10

2 years ago

1.21.2

2 years ago

1.21.3

2 years ago

1.22.0

2 years ago

1.22.3

2 years ago

1.22.4

2 years ago

1.22.1

2 years ago

1.22.2

2 years ago

1.22.8

2 years ago

1.22.5

2 years ago

1.22.6

2 years ago

1.22.9

2 years ago

1.20.38

2 years ago

1.20.39

2 years ago

1.20.33

2 years ago

1.20.34

2 years ago

1.20.35

2 years ago

1.20.36

2 years ago

1.20.37

2 years ago

1.21.0

2 years ago

1.21.1

2 years ago

1.20.41

2 years ago

1.20.42

2 years ago

1.20.43

2 years ago

1.20.44

2 years ago

1.20.40

2 years ago

1.20.16

2 years ago

1.20.17

2 years ago

1.20.18

2 years ago

1.20.19

2 years ago

1.20.30

2 years ago

1.20.31

2 years ago

1.20.32

2 years ago

1.20.10

2 years ago

1.20.11

2 years ago

1.20.12

2 years ago

1.20.13

2 years ago

1.20.14

2 years ago

1.20.15

2 years ago

1.20.27

2 years ago

1.20.28

2 years ago

1.20.29

2 years ago

1.20.9

2 years ago

1.20.7

2 years ago

1.20.20

2 years ago

1.20.21

2 years ago

1.20.22

2 years ago

1.20.23

2 years ago

1.20.24

2 years ago

1.20.25

2 years ago

1.20.26

2 years ago

1.20.5

3 years ago

1.20.6

3 years ago

1.20.3

3 years ago

1.20.4

3 years ago

1.20.2

3 years ago

1.20.1

3 years ago

1.20.0

3 years ago

1.19.5

3 years ago

1.19.4

3 years ago

1.19.3

3 years ago

1.19.2

3 years ago

1.19.1

3 years ago

1.19.0

3 years ago