# React Foundation UI

Web React components based on the Hii Foundation design system

## 1. Installation

Run

```bash
yarn add @hiiretail/react-foundation-ui
```

or

```bash
npm install @hiiretail/react-foundation-ui
```

## 2. Fonts

Add these imports to your `index.html`

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
  rel="stylesheet"
/>
```

## 3. Use the library

Wrap your root component with `FoundationProvider`

```tsx
///index.tsx
import { FoundationProvider } from '@hiiretail/react-foundation-ui';

ReactDOM.render(
  <FoundationProvider>
    <App />
  </FoundationProvider>,
  document.getElementById('root') || document.createElement('div'),
);
```

## 4. Components reference

For components documentation use [official Material UI](https://mui.com/material-ui/)

### For Alert Notifications:

Wrap root component with `AlertNotificationProvider`

```tsx
///index.tsx
import { AlertNotificationProvider } from '@hiiretail/react-foundation-ui';

<AlertNotificationProvider>
  <App />
</AlertNotificationProvider>;
```

```tsx
///<consumer-file>.tsx
import { useAlertNotifications, AlertNotificationType } from '@hiiretail/react-foundation-ui';

const notification = useAlertNotifications();


notification.show({ message: 'Custom message', type: AlertNotificationType.SUCCESS });
// Refer the types for more options.

/*
* Alerts disappear automatically after set duration(5 secs by default).
* In case, the alert needs to be closed before that duration, the Hide method can be utilised.
*/

const alertKey = notification.show({ ... });

// Pass the returned key to the hide method.
notification.hide(alertKey);


```