Basic example

This is an example of how to use the banner provider trough the useBanner. And the banner component. The banner provider is used to manage the state of the

Provider

The BannerProvider is a context provider that is used to manage the state of the banner. It is used to open and close the banner. The provider is used to wrap the application in the layout.tsx file.

To use the provider you must use the useBanner hook . The hook will return 4 function and 2 variable. The function are

• openBanner(React.ReactNode): This function is used to open the banner. It will take a component as a parameter. The component will be rendered on the screen.
• closeBanner(): This function is used to close the banner. No parameter needed.
• isBannerOpen: This variable is used to check if the banner is open or not. It will return a boolean value.
• lockBanner(): This function is used to lock the banner. This will make the function closeBanner unavailable.
• unlockBanner(): This function is used to unlock the banner. This will make the function closeBanner available.
• isBannerLocked: This variable is used to check if the banner is locked or not. It will return a boolean value.

1// Call hook
2const {
3  openBanner,
4  closeBanner,
5  isBannerOpen,
6  lockBanner,
7  unlockBanner,
8  isBannerLock,
9} = useBanner();
10
11// Usage
12openBanner(Your Component ...);
13closeBanner();
14lockBanner();
15unlockBanner();
16isBannerOpen;
17isBannerLock;
18

Variant

You can use the variant prop to change the variant of the banner. The default variant is light.

Lock and Unlock

The lock and unlock function is used to prevent the banner from being closed when the user clicks outside of it. This is useful when you want to keep the banner open until the user explicitly closes it.

If you use the lock function do not use the close function in the banner component. Components that

Attribute