Realert

A simple functional alert for React projects.

Table of contents

1. Installation
2. Usage
3. Alert Templates
   • Material UI Template
   • Custom Template
4. API

Installation

npm i @a-faraji/realert

yarn add @a-faraji/realert

Usage

Wrap your app inside RealertProvider component.

import React from 'react';
import { RealertProvider } from '@a-faraji/realert';

export default function App() {
  return (
    <RealertProvider>
      {/* ... rest of your code */}
    </RealertProvider>
  );
};

Call useRealert hook when you need to show an alert.

import { useRealert } from '@a-faraji/realert';

export default function AddPostExample(/* props */) {
  const alert = useRealert();

  const onClick = () => {
    // do some stuff
    alert.show('The process was successful!')
  }

  return (
    <div>
      {/* ... */}
      <button onClick={onClick}>Add Post</button>
    </div>
  );
}

Alert Templates

Realert can be used with custom alert templates. The following templates are going to be implemented:

Material UI

Go to Repo →

Material UI should be installed and configured. Please be sure that RealertProvider is inside the MUI's ThemeProvider.

Install the template:

npm i @a-faraji/react-template-mui

And pass the template to RealertProvider like this:

import RealertTemplateMui from '@a-faraji/realert-template-mui';
// ...
<RealertProvider template={RealertTemplateMui}>
  {/* ... rest of your code */}
</RealertProvider>

Custom Template

You can create your own alert template. Just implement a Functional Component with RealertTemplateProps (and additional props). Take a look at DefaultTemplate or MUI Template as an example.

API

RealertProvider

| Prop | Type | Description | Required | |----------|------|------------------------------|------------------------------------| | template | | A realert template component | No. Defaults to Default Template |

useRealert

@Returns

| Prop | Type | Description | |------|-------------------------------------------------------------------------|---------------------------------------------------------| | show | (message: ReactNode, props?: RealertProps) => RealertId; | The function to show the alert. It returns RealertId. | | hide | (id: RealertId) => void; | The function to hide the alert with provided ID. | |