Skip to content

Create useToast Provider/Hook #3

@nsantos16

Description

@nsantos16

Description

We need to implement the basic hook to render a component passed as a param on an absolute position.
According to primary research about how to render on the virtual DOM root, we need to provide an app wrapper (Provided) to distinct the absolute position of the screen.


The basic API of the hook is the next one:

const {onOpen, onClose} = useToast (<CustomToastComponent />);

In which:

  • useToast is a hook invokes in whatever component inside the app
  • onOpen is a handler function that when is invoked, shows<CustomToastComponent />in a fixed position (for now)
  • onClose is a handler function that when is invoked remove<CustomToastComponent />from the app if it was shown, in another case, it doesn't anything

The basic API of the provider is the next one:

<ToastProvider>
  <App />
<ToastProvider />

In which:

  • App is the application
  • ToastProvider is a provider that allows useToast hook to show the custom component from anywhere in the application.

** Additional context **
To implementing the Provider component, is recommended use Context API

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions