@kakadu/components
v3.6.0
Published
Kakadu components library
Maintainers
thomaslindstr_mReadme
Kakadu Components
Storybook
View the online component Storybook in Chromatic here.
Installation
First, install the package via npm:
npm install @kakadu/componentsNext, import the base stylesheet and the ThemeSetter in your application’s entry point (for example _app.tsx). For notifications to work, you’ll also need the NotificationProvider.
import React from 'react';
import {type AppProps} from 'next/app';
import {ThemeSetter} from '@kakadu/components';
import '@kakadu/components/components.css';
export default function App({Component, pageProps}: AppProps) {
return (
<>
<ThemeSetter />
<NotificationProvider>
<Component {...pageProps} />
</NotificationProvider>
</>
);
}Then, in your _document.tsx (or equivalent), import the theme class name and the FontFamilyHead:
import React from 'react';
import Document, {Html, Head, Main, NextScript} from 'next/document';
import {theme, FontFamilyHead} from '@kakadu/components';
export default class CustomDocument extends Document {
render() {
return (
<Html suppressHydrationWarning className={theme}>
<Head>
<FontFamilyHead />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}Modals using roots and shadow roots
When rendering the modal in another root (such as a shadow root), you should provide the necessary decorators on the Modal component, as it will be rendered in a separate portal.
One such decorator could be the NotificationProvider (if notifications are used), or a ThemeProvider (custom element).
The provided decorators must render its children, and you can use outerDecorators and innerDecorators to control if they are rendered before or inside the dimming layer.
// Pseudo code:
const outerDecorators = useMemo(() => [ThemeProvider], []);
const innerDecorators = useMemo(() => [NotificationProvider], []);
<Modal outerDecorators={outerDecorators} innerDecorators={innerDecorators} />;Development
Storybook
To run Storybook locally:
npm run storybookOnce started, open http://localhost:6006 in your browser.
Publishing and release
- Commit your changes.
- Depending on the changeset, run
npm version major|minor|patch. - Run
npm publish.