A React component library based on Det Fælles Designsystem (DKFDS) This library provides React components implemented by following the guidelines for each component. Components currently have hard-coded danish labels, which may be customisable in the future
A demo of the components in Storybook is available here
Install the dependency, plus peer dependencies:
npm i dkfds react-dkfdsThis library assumes the DKFDS styling is present in the document. Add the DKFDS CSS to your application from node_modules/dkfds/dist/css/dkfds.css" />
This library assumes the DKFDS SVG sprite sheet is available in the document. Insert the SVG-code into the DOM from node_modules/dkfds/dist/img/all-svg-icons.svg.
Labels are Danish by default, in accordance with the official examples. To add custom label translations, create your own translation-function and pass it to the TranslationProvider
// myTranslations.ts
import type { TranslationMap } from "react-dkfds";
export const translations: TranslationMap = {
accordion_open_all: "Open all",
accordion_close_all: "Close all",
input_field_characters_left: ({ charactersLeft }) =>
`You have ${charactersLeft} characters remaining`,
};// App.tsx
import { DkfdsTranslationProvider } from "react-dkfds";
import { translations } from "./myTranslations";
export default function App() {
return (
<DkfdsTranslationProvider translations={translations}>
<App />
</DkfdsTranslationProvider>
);
}Any translation not provided, or any function returning undefined, will make the component fall back to the original text. To render no text, return an empty string. You may also wrap individual components in a DkfdsTranslationProvider to change specific elements' default texts.
The library contains almost every component listed on Det Fælles Designsystem. Every component has been tested by implementing each code example for every component, which can be seen in the storybook project. Do not hesitate to create a pull request to expose more props or propose restructuring the props of a component
The Storybook project can be seen by checking out this repository and running the following command:
npm run storybookThese can also be used for reference when implementing your own features with these components.
If you notice any components missing, please create an issue or submit a pull request
The following is a prioritised list of features to be implemented in this library.
- Customising Storybook site with better documentation
- Automated testing of component functionality