Skip to content

Toasts prop on the Toast provider component #9

@nsantos16

Description

@nsantos16

Description

In order to increase the scalability and the dev experience using the library, we need to add a prop calling toasts to the ToastProvider component, this prop allows our users to implement in the provider an easy way of calling different types of Toast components, only calling by their key name assigned in the toasts object which has as a value the custom component.

Expected Behavior

As an example of the expected behavior, we have toastsComponents objects declared in this way

const toastsComponents = {'success': <ToastSuccess />, 'error': <ToastError />};

The ToastsProvider receive the prop according to this

<ToastProvider toasts={toastsComponents}>
  <App />
<ToastProvider />

And when the hook useToast receive on of the keys declared on toastsComponents, then acts the same way it would if you were passing a component param

// Same as useToast(<ToastSuccess />)
const { onClose , onOpen } = useToast('success');

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions