Henaket React UI Kit

React UI kit for the Henaket design system.

Version

Current release: 0.3.0

Installation

npm install henaket-react react react-dom antd

Usage

import 'antd/dist/reset.css';
import 'henaket-react/styles.css';
import {
  AppAlert,
  AppButton,
  Footer,
  Header,
  HenaketProvider,
} from 'henaket-react';

export function App() {
  return (
    <HenaketProvider>
      <div>
        <Header variant="simpleLogo" />
        <AppButton kind="primary" label="Continue application" />
        <AppAlert
          variant="success"
          message="Application draft saved"
          description="You can leave this page and continue from your dashboard later."
        />
        <Footer ministryName="Ministry of Digital Development" />
      </div>
    </HenaketProvider>
  );
}

Required Runtime Setup

• Import henaket-react/styles.css once at the app entry point.
• Import antd/dist/reset.css before the Henaket stylesheet.
• Wrap your app with HenaketProvider to match the runtime setup used in Storybook and the consumer app.
• Default logos, footer emblems, registry icons, and the fallback profile image work out of the box with no extra asset hosting step.

Header Menu Navigation

Header menu items can now be used for real navigation in consumer apps.

import { Header } from 'henaket-react';
import { useNavigate } from 'react-router-dom';

export function AppHeader() {
  const navigate = useNavigate();

  const menuItems = [
    { key: '1', label: 'Home', href: '/' },
    { key: '2', label: 'Services', href: '/services' },
    { key: '3', label: 'Contact', href: '/contact' },
  ].map((item) => ({
    ...item,
    onClick: (event) => {
      event.preventDefault();
      navigate(item.href);
    },
  }));

  return <Header variant="menu" menuItems={menuItems} activeMenuKey="1" />;
}

Supported menu item fields:

• key
• label
• hasChevron
• href
• target
• rel
• onClick

Recommended app shell:

<HenaketProvider>
  <App />
</HenaketProvider>

Optional advanced setup:

• If you want to serve those assets from your own CDN or public path, copy node_modules/henaket-react/dist/public into a public URL in your app and pass that URL as assetBasePath to HenaketProvider.

<HenaketProvider assetBasePath="/henaket-assets">
  <App />
</HenaketProvider>

Peer Dependencies

Install the required peer dependencies declared by the package:

• [email protected]
• [email protected]
• [email protected]

Documentation

Full component documentation and examples:

https://henaket.web.app/