├── .gitattributes
├── .github
└── workflows
│ ├── main.yml
│ └── size.yml
├── .gitignore
├── .nvmrc
├── LICENSE
├── README.md
├── dts.config.js
├── example
├── index.html
├── index.tsx
├── package.json
├── react-local-toast.scss
├── styles.scss
├── tsconfig.json
├── vite.config.js
└── yarn.lock
├── package.json
├── patches
└── dts-cli+2.0.4.patch
├── src
├── const.ts
├── context.ts
├── default-implementation.tsx
├── factory.ts
├── hoc.tsx
├── icons.tsx
├── index.ts
├── internals.ts
├── provider.tsx
├── styles.scss
├── target.tsx
├── types.ts
└── viewport.tsx
├── tsconfig.json
└── yarn.lock
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text eol=lf
2 |
--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 | on: [push]
3 | jobs:
4 | build:
5 | name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
6 |
7 | runs-on: ${{ matrix.os }}
8 | strategy:
9 | matrix:
10 | node: ['18.x', '20.x']
11 | os: [ubuntu-latest, windows-latest, macOS-latest]
12 |
13 | steps:
14 | - name: Checkout repo
15 | uses: actions/checkout@v3
16 |
17 | - name: Use Node ${{ matrix.node }}
18 | uses: actions/setup-node@v3
19 | with:
20 | node-version: ${{ matrix.node }}
21 |
22 | - name: Install deps and build (with cache)
23 | uses: bahmutov/npm-install@v1
24 |
25 | - name: Lint
26 | run: yarn lint
27 |
28 | - name: Test
29 | run: yarn test --ci --coverage --maxWorkers=2
30 |
31 | - name: Build
32 | run: yarn build
33 |
--------------------------------------------------------------------------------
/.github/workflows/size.yml:
--------------------------------------------------------------------------------
1 | name: size
2 | on: [pull_request]
3 | jobs:
4 | size:
5 | runs-on: ubuntu-latest
6 | env:
7 | CI_JOB_NUMBER: 1
8 | steps:
9 | - uses: actions/checkout@v3
10 | - uses: andresz1/size-limit-action@v1
11 | with:
12 | github_token: ${{ secrets.GITHUB_TOKEN }}
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .DS_Store
3 | node_modules
4 | .cache
5 | dist
6 |
7 | stats.html
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 20
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 OlegWock
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-local-toast
2 |
3 | [![npm version][npmv-image]][npmv-url]
4 | [![npm downloads][npmd-image]][npmd-url]
5 |
6 | > Local toast helps you to provide feedback related to particular components on page
7 |
8 |
9 |
10 |
11 |
12 |
13 | > [!IMPORTANT]
14 | > This is v2 of react-local-toast. There weren't any changes in API, but v2 doesn't provide minified styles.
15 |
16 |
17 | ## Features
18 |
19 | * Local toasts are linked to particular component in DOM.
20 | * Toast can be displayed on right/left/top/bottom side of component.
21 | * Toast can be hidden after some timout or hidden programatically.
22 | * Component might have multiple toasts.
23 | * Multiple toasts stucks **vertically** (even if displayed on left or right side).
24 | * `info`, `success`, `warning`, `error` and `loading` toasts out of the box.
25 | * You can bring your own design. Or your own Toast component. Or your custom implementation of toasts.
26 | * WAI-ARIA support.
27 | * TypeScript!
28 |
29 |
30 | ## Documentation and showcase
31 |
32 | Can be found [here](https://react-local-toast.netlify.app/). Check it out, I spent a lot of effort making it 😅.
33 |
34 | ## Installation
35 |
36 | ```
37 | npm install react-local-toast --save
38 |
39 | # Or if you prefer yarn
40 | yarn add react-local-toast
41 | ```
42 |
43 | ## Basic Usage
44 |
45 | react-local-toast doesn't automatically inject its styles into DOM, you need to do that. In most cases it will be just:
46 |
47 | ```js
48 | import 'react-local-toast/dist/bundle.css';
49 | ```
50 |
51 | This should work fine for most of tools (Create React App included). For more specific use cases (e.g. using toasts in Shadow DOM) you might want to inject styles manually.
52 |
53 | Now you need to wrap your application in `LocalToastProvider`.
54 |
55 | ```jsx
56 | import React from 'react';
57 | import { LocalToastProvider } from 'react-local-toast';
58 |
59 | export default () => {
60 | return (
61 | {/* All your components that will use local toasts should be children of this provider. */}
62 |
63 | );
64 | };
65 | ```
66 |
67 | Local toasts are linked to particular components on page, so let's mark our component as target for local toast:
68 |
69 | ```jsx
70 | import React from 'react';
71 | import { LocalToastTarget } from 'react-local-toast';
72 |
73 | export const App = () => {
74 | return (
75 |
This component should be inside LocalToastProvider
76 | {/* Wrap your component with */}
77 |
78 |
79 |
80 |
);
81 | };
82 | ```
83 |
84 | Local toast uses refs to get position of component, so in case you want to use toasts with functional components – make sure they are wrapped in `React.forwardRef`.
85 |
86 | And final piece! Update your component to actually produce local toasts:
87 |
88 | ```jsx
89 | import React from 'react';
90 | // New import here !!
91 | import { LocalToastTarget, useLocalToast } from 'react-local-toast';
92 |
93 | export const App = () => {
94 | // Use hook to show and hide toasts
95 | const {showToast, removeToast} = useLocalToast();
96 |
97 | return (
98 |
This component should be inside LocalToastProvider
99 |
100 |
101 |
102 |
);
103 | };
104 | ```
105 |
106 | In case you need to show toast from class component, you can use HOC like this:
107 |
108 | ```tsx
109 | import { LocalToastTarget, withLocalToast, LocalToastHocProps } from 'react-local-toast';
110 |
111 | interface Props extends LocalToastHocProps {
112 | name: string
113 | }
114 |
115 | class ClassComp extends React.Component {
116 | sayHello = () => {
117 | this.props.showToast('class_comp', `Hello, ${this.props.name}!`)
118 | };
119 | render() {
120 | return (
10 |