Home - GyldendalDigital/kobber GitHub Wiki
Components can be used as react components or as web components.
TypeScript definitions are included.
See also https://kobber.gyldendal.no/komponenter.
Run one of the following commands to add @gyldendal/kobber-components to your project:
npm install @gyldendal/kobber-components
yarn add @gyldendal/kobber-components
Depending on you usage, you might need to to install the optional peerDependencies.
The Inter variable font is used by default. It can be installed separately from fontsource with one of these commands:
npm install @fontsource-variable/inter
yarn add @fontsource-variable/inter
And then imported in your project:
import '@fontsource-variable/inter';
Components can be imported as react components or as web components.
As a react component:
import { ProgressBar } from "@gyldendal/kobber-components/react";
const App = () => <ProgressBar />;
As a custom element:
<script>
import "@gyldendal/kobber-components/web-components";
</script>
<kobber-progress-bar />
As a web component:
import { ProgressBar } from "@gyldendal/kobber-components/web-components";
const progressBar = new ProgressBar();
document.body.appendChild(progressBar);
We recommend using normalize.css or something similar to normalize browser styles.
For maintainability, components should be created to consume data as children rather than props. By using props for all data, the amount of component props over time will grow unmaintanable. Most likely, you will end up with a component that needs to accept children components as props (while having to maintain possibly deprecated data props).
Example of component consuming data as children:
<RadioGroup
label="Format"
onChange={(value) => setValue(value)}
currentValue={value}
direction="horizontal" // eller vertical
>
<RadioInput group="format" label="Innbundet" {...}/>
</RadioGroup>
Example of component consuming data as props:
<RadioGroup
label="Format"
group="format"
onChange={(value) => setValue(value)}
currentValue={value}
direction="horizontal" // eller vertical
options={[
{ label: "Innbundet", value: "hardcover" },
{ label: "Pocket", value: "pocket" },
{ label: "Ebok", value: "ebook" },
{ label: "Lydbok", value: "audiobook" }
]}
/>
After creating a new component, do the following steps to expose it to the world:
- Export it from src/index.react.tsx and src/index.web-components.ts.
- Run
yarn build
. - Commit changes, and publish according to changeset.