Providers

LumiaProvider

Description

The LumiaProvider component is a higher-order component that wraps around your application to provide global context and functionality for notifications and modals. It uses various providers to manage notifications, standard modals, and horizontal modals, ensuring that these features are available throughout the application.

Use Case

The LumiaProvider component is ideal for:

• Setting up global state and context for notifications and modal dialogs.
• Providing a consistent and centralized way to manage modals and notifications in your application.
• Ensuring that modals and notifications can be accessed and used from any part of the application.

Props Table

Prop Name	Type	Description	Default Value	Required
children	React.ReactNode	The child components to be wrapped by the provider.	undefined	Yes

Example Use Case

Example 1: Wrapping an Application with LumiaProvider

Wrap your application with the LumiaProvider to enable notifications and modals.

import React from "react";
import ReactDOM from "react-dom";
import LumiaProvider from "./LumiaProvider";
import App from "./App";

ReactDOM.render(
  <LumiaProvider>
    <App />
  </LumiaProvider>,
  document.getElementById("root")
);

NotificationProvider

NotificationProvider Component Documentation

Description

The NotificationProvider component is a context provider that manages the state and functionality for notifications in your application. It uses a reducer to handle actions such as adding a new notification and marking notifications as read. This provider makes it easy to manage and display notifications across your application.

Use Case

The NotificationProvider component is ideal for:

• Managing application-wide notifications.
• Keeping track of unread notifications and displaying them in a user interface.
• Providing a centralized way to add, update, and read notifications.

Props Table

NotificationProvider

Prop Name	Type	Description	Default Value	Required
children	React.ReactNode	The child components to be wrapped by the provider.	undefined	Yes

Notification

Prop Name	Type	Description	Default Value	Required
id	string	Unique identifier for the notification.	undefined	Yes
type	"default" | "flat" | "outlined"	Type of notification style.	"default"	No
title	string	Title of the notification.	undefined	Yes
description	string	Description of the notification.	undefined	No
date	Date	Date when the notification was created.	undefined	Yes
read	boolean	Whether the notification has been read.	false	Yes
icon	React.FC<AssetProps>	Icon to be displayed with the notification.	undefined	No
image	string	Image to be displayed with the notification.	undefined	No

Example Use Case

Example 1: Using NotificationProvider

Wrap your application with the NotificationProvider to enable notifications.

import React from 'react';
import ReactDOM from 'react-dom';
import { NotificationProvider } from './NotificationProvider';
import App from './App';

ReactDOM.render(
  <NotificationProvider>
    <App />
  </NotificationProvider>,
  document.getElementById('root')
);

StandardModalProvider || HorizontalModalProvider

Description

The StandardModal and HorizontalModal components are specialized modal dialogs used to display various content types within your application. These modals are integrated with providers (StandardModalProvider and HorizontalModalProvider) to manage their state and visibility. The StandardModal is a centered modal, while the HorizontalModal slides in from the left or right.

Use Case

The StandardModal and HorizontalModal components are ideal for:

• Displaying content in modal dialogs.
• Providing additional information or forms without navigating away from the current page.
• Implementing modal-based interactions with different display styles.

Props Table

StandardModal

Prop Name	Type	Description	Default Value	Required
isVisible	boolean	Whether the modal is visible.	false	Yes
hideModal	() => void	Function to hide the modal.	undefined	Yes
Component	React.FC | null	The component to be displayed inside the modal.	null	No

HorizontalModal

Prop Name	Type	Description	Default Value	Required
isVisible	boolean	Whether the modal is visible.	false	Yes
hideModal	() => void	Function to hide the modal.	undefined	Yes
Component	React.FC | null	The component to be displayed inside the modal.	null	No
direction	"left" | "right"	The direction from which the modal slides in.	"left"	No

Example Use Case

Example 1: Using StandardModal

A component that displays a standard modal.

import React from 'react';
import { useStandardModal } from './StandardModalProvider';
import { StandardModal } from './Modals';

const MyComponent: React.FC = () => {
  const { showModal } = useStandardModal();

  return (
    <div>
      <button onClick={() => showModal(MyModalContent)}>Show Modal</button>
      <StandardModal />
    </div>
  );
};

const MyModalContent: React.FC = () => <div>Modal Content</div>;

layout

Prism