Skip to content

Commit f8d0384

Browse files
chetoncheton
committed
Enhance documentation
1 parent d6df358 commit f8d0384

9 files changed

+87
-91
lines changed

‎docs/build/bundle.71584c53.js ‎docs/build/bundle.daeb196f.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/build/bundle.71584c53.js.LICENSE ‎docs/build/bundle.daeb196f.js.LICENSE

+5-9
Original file line numberDiff line numberDiff line change
@@ -2978,18 +2978,14 @@
29782978
!*** ./node_modules/react-styleguidist/lib/client/utils/transpileImports.js ***!
29792979
\******************************************************************************/
29802980

2981+
/*!*****************************************************************************************************!*\
2982+
!*** ./node_modules/react-styleguidist/lib/loaders/examples-loader.js!./styleguide/examples/API.md ***!
2983+
\*****************************************************************************************************/
2984+
29812985
/*!********************************************************************************************************!*\
2982-
!*** ./node_modules/react-styleguidist/lib/loaders/examples-loader.js!./styleguide/examples/README.md ***!
2986+
!*** ./node_modules/react-styleguidist/lib/loaders/examples-loader.js!./styleguide/examples/Toasts.md ***!
29832987
\********************************************************************************************************/
29842988

2985-
/*!******************************************************************************************************!*\
2986-
!*** ./node_modules/react-styleguidist/lib/loaders/examples-loader.js!./styleguide/examples/hocs.md ***!
2987-
\******************************************************************************************************/
2988-
2989-
/*!*******************************************************************************************************!*\
2990-
!*** ./node_modules/react-styleguidist/lib/loaders/examples-loader.js!./styleguide/examples/hooks.md ***!
2991-
\*******************************************************************************************************/
2992-
29932989
/*!***********************************************************************************************************************************************************************************!*\
29942990
!*** ./node_modules/react-styleguidist/lib/loaders/examples-loader.js?displayName=ToastConsumer&file=.%2FToastConsumer.jsx&shouldShowDefaultExample=false!./src/ToastConsumer.md ***!
29952991
\***********************************************************************************************************************************************************************************/

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
</head>
99
<body>
1010
<div id="rsg-root"></div>
11-
<script src="build/bundle.71584c53.js"></script>
11+
<script src="build/bundle.daeb196f.js"></script>
1212
</body>
1313
</html>

‎src/ToastConsumer.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
```jsx static
22
<ToastConsumer>
3-
{({ add, remove, removeAll, update, toasts }) => {
3+
{({ hasToast, addToast, removeToast, removeAllToasts, updateToast, toasts }) => (
44
return <div>Toast count: {toasts.length}</div>;
55
}}
66
</ToastConsumer>

‎src/ToastProvider.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ You can also use the **children as a function** to pass methods and properties t
88

99
```jsx static
1010
<ToastProvider>
11-
{({ add, remove, removeAll, update, toasts }) => (
11+
{({ hasToast, addToast, removeToast, removeAllToasts, updateToast, toasts }) => (
1212
<App />
1313
)}
1414
</ToastProvider>

‎styleguide.config.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,12 @@ module.exports = {
8686
title: `React Toasts v${pkg.version}`,
8787
sections: [
8888
{
89-
name: 'Getting Started',
90-
content: path.resolve(__dirname, 'styleguide/examples/README.md'),
89+
name: 'Toasts',
90+
content: path.resolve(__dirname, 'styleguide/examples/Toasts.md'),
9191
},
9292
{
93-
name: 'High-Order Components',
94-
content: path.resolve(__dirname, 'styleguide/examples/hocs.md'),
95-
},
96-
{
97-
name: 'Hooks',
98-
content: path.resolve(__dirname, 'styleguide/examples/hooks.md'),
93+
name: 'API',
94+
content: path.resolve(__dirname, 'styleguide/examples/API.md'),
9995
},
10096
{
10197
name: 'Components',

‎styleguide/examples/hocs.md ‎styleguide/examples/API.md

+41-18
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
1-
## withToast
2-
3-
You can get access to the toast via the `withToast` higher-order component. `withToast` will pass updated `toast` props to the wrapped component whenever it renders.
4-
5-
```jsx static
6-
const Component = ({
7-
toast,
8-
}) => {
9-
const { toasts, hasToast, addToast, removeToast, removeAllToasts, updateToast } = toast;
10-
11-
return <div>Toast count: {toasts.length}</div>;
12-
};
13-
14-
const EnhancedComponent = withToast(Component);
15-
```
16-
17-
The `toast` prop contains the following properties and methods:
18-
191
### Properties
202

213
#### `toasts`
@@ -41,19 +23,60 @@ The `toast` prop contains the following properties and methods:
4123
The `hasToast` method returns a boolean value that indicates if the toast exists.
4224
- `id` The id to check whether a toast exists.
4325

26+
```js static
27+
if (hasToast(toast.id)) {
28+
console.log(`The toast exists (${id}).`);
29+
} else {
30+
console.log(`The toast does not exist (${id}).`);
31+
}
32+
```
33+
4434
#### `addToast(content, [meta], [callback])`
4535
- `content` The content of the toast, which can be any renderable content.
4636
- `[meta]` An optional user-defined meta data associated with the toast.
4737
- `[callback]` An optional callback, which is passed the added toast id.
4838

39+
```js static
40+
addToast('Settings saved.', { type: 'success' }, id => {
41+
console.log(`Added a new toast (${id}).`);
42+
});
43+
```
44+
4945
#### `removeToast(id, [callback])`
5046
- `id` The id of the toast to remove.
5147
- `[callback]` An optional callback, which is passed the removed toast id.
5248

49+
```js static
50+
removeToast(toast.id, id => {
51+
console.log(`Removed a toast (${id}).`);
52+
});
53+
```
54+
5355
#### `removeAllToasts([callback])`
5456
- `[callback]` An optional callback.
5557

58+
```js static
59+
removeAllToasts(() => {
60+
console.log(`Removed all toasts.');
61+
});
62+
```
63+
5664
#### `updateToast(id, updater, [callback])`
5765
- `id` The id of the toast to update.
5866
- `updater` An updater function that takes the matched toast as the first argument and returns an updated toast.
5967
- `[callback]` An optional callback, which is passed the updated toast id.
68+
69+
```js static
70+
updateToast(toast.id, (toast) => ({
71+
...toast,
72+
content: (
73+
<div>Updated content.</div>
74+
),
75+
meta: {
76+
...toast.meta,
77+
updatedTime: Date.now(),
78+
}
79+
}), id => {
80+
console.log(`Updated a toast (${id}).`);
81+
});
82+
```

‎styleguide/examples/README.md ‎styleguide/examples/Toasts.md

+32
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
Wrap your app in `ToastProvider`, which provides context to the consuming components that are descendants of the `ToastProvider`.
2+
3+
## Context
4+
15
```jsx
26
const Toasts = () => (
37
<ToastConsumer>
@@ -39,3 +43,31 @@ const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eg
3943
)}
4044
</ToastProvider>
4145
```
46+
47+
## Higer-Order Component
48+
49+
### withToast
50+
51+
You can get access to the toast via the `withToast` higher-order component. `withToast` will pass updated `toast` props to the wrapped component whenever it renders.
52+
53+
```jsx static
54+
const Component = ({
55+
toast,
56+
}) => {
57+
const { toasts, hasToast, addToast, removeToast, removeAllToasts, updateToast } = toast;
58+
59+
return <div>Toast count: {toasts.length}</div>;
60+
};
61+
62+
const EnhancedComponent = withToast(Component);
63+
```
64+
65+
## Hook
66+
67+
### useToast
68+
69+
The `useToast` hook returns an object where you can render toast notifications or manipulate the toast.
70+
71+
```jsx static
72+
const { toasts, hasToast, addToast, removeToast, removeAllToasts, updateToast } = useToast();
73+
```

‎styleguide/examples/hooks.md

-51
This file was deleted.

0 commit comments

Comments
 (0)