@gnist/component-utils
v1.0.8
Published
`@gnist/component-utils` currently contains a single utility function for easily creating React components from css classes (e.g. created with [`style(...)`](https://vanilla-extract.style/documentation/api/style/) from `@vanilla-extract/css`) or recipes c
Downloads
284
Readme
Component utilities for @moller/design-system
@gnist/component-utils
currently contains a single utility function for easily creating React components
from css classes (e.g. created with style(...)
from @vanilla-extract/css
) or recipes created with
@vanilla-extract/recipes
.
Overview
The function component
has two overloads, for use with either a className
string or a recipe function.
Using a className string
// Heading.css.ts
import { atoms } from "@moller/gnist-themes/atoms.css.js";
import { style } from "@vanilla-extract/css";
export const heading = style([
{ float: "left" },
atoms({ margin: "none", typography: "subtitle-small" }),
]);
// Heading.tsx
import { component } from "@gnist/component-utils";
import { bannerHeading } from "./Heading.css.js";
export const Heading = component("Heading", heading, "h2");
// │ │ │
// The display name of the component ┘ │ │
// The className to use for the element ───────┘ │
// The default HTML element or React component to use ─┘
// ...later...
<Heading $as="h4" href="#anchor">
Now this is a h4
</Heading>;
Using a recipe function
// Box.css.ts
import { recipe } from "@vanilla-extract/recipes";
import { atoms } from "@moller/gnist-themes/atoms.css.js";
export const box = recipe({
base: atoms({ display: "flex" }),
variants: {
density: {
default: atoms({ padding: "s" }),
compact: atoms({ padding: "xxs" }),
},
},
defaultVariants: { density: "default" },
});
// Box.tsx
import { component } from "@gnist/component-utils";
import { box } from "./Box.css.js";
export const Box = component("Box", box, "div");
// │ │ │
// The display name ───────────┘ │ │
// The recipe function ─────────────┘ │
// The default element or component ───────┘
// ...later...
<Box $as="span" density="compact">
Now the box has xxs padding and is a span
</Box>;
Use with other React components
Note that component
can be used with any React component that has a className
prop,
not just HTML elements.