Toast docs + children support #2048
Conversation
Question:Should (my gut is |
Toast docs: clarify usagePreview: documentation | landing | table |
| aligned along the top or bottom edge of its container (new toasts will slide in from that edge) and | ||
| horizontally aligned along the left edge, center, or right edge of its container. | ||
| Render the `<Toaster>` component like any other element. Then, either access the instance methods by supplying | ||
| a `ref` handler (see example below), or supply rendered `<Toast>` elements as `children` of the `<Toaster>`. |
There was a problem hiding this comment.
I'm not sure why we're suggesting a ref handler... if someone really wanted to do this in a React-idiomatic way, wouldn't they provide toasts as children? What are the benefits of this over the Toaster.create() API? I feel all these options make the usage docs more confusing.
There was a problem hiding this comment.
i'll move the children suggestion first and note that you can ref but please don't (see next paragraph).
| @@ -58,51 +51,71 @@ OurToaster.update(key, { message: "Still toasted!" }); | |||
| enable `autoFocus` for a `Toaster` via a prop, if desired. | |||
| </div> | |||
|
|
|||
| @### Static method | |||
| @interface IToaster | |||
There was a problem hiding this comment.
I think this should go inside the "Static usage" section, after the first bit of prose there. Prefer reading prose first, detailed props tables later
Overlay supports falsy childrenPreview: documentation | landing | table |
giladgray
force-pushed
the
gg/toast-docs
branch
from
f9a9ef9
to
2ab94e8
Compare
docsPreview: documentation | landing | table |
| `Toaster` can be used in one of two ways: | ||
|
|
||
| 1. `Toaster.create(props)` static method returns a new `IToaster` instance. Use the instance method `toaster.show()` to manipulate this instance. __(recommended)__ | ||
| 1. Render a `<Toaster>` element and either use the `ref` prop to access its instance methods, or pass rendered `<Toast>`s as `children`. |
There was a problem hiding this comment.
This feels like 3 options.
Toaster.create(...)<Toaster ref={...} /><Toaster><Toast ... /></Toaster>
they can all be mixed & matched anyway, so might as well list all 3.
There was a problem hiding this comment.
2 and 3 can be mixed, no way to provide children to 1.
but yes there are three, so i'll update
There was a problem hiding this comment.
well you can combine option 1 with 2 & 3, you'd just get multiple Toaster instances
three ways to use a toasterPreview: documentation | landing | table |
|
Love it, thanks for following through! |
Fixes #1224
Changes proposed in this pull request:
Toasterrenderschildrenafter state toastsOverlaynow passes through non-JSXchildrenstring | numberchildren will not be animated. to be fair, this is an improvement over the previous behavior where it would simply die if given non-JSX children.