React Foundation UI

Web React components based on the Hii Foundation design system

1. Installation

Run

yarn add @hiiretail/react-foundation-ui

or

npm install @hiiretail/react-foundation-ui

2. Fonts

Add these imports to your index.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

///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

For Alert Notifications:

Wrap root component with AlertNotificationProvider

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

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

///<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);