NibCSS

@nibcss/react

Every export of the React bindings: NibProvider, useNib, nib, useNibRuntime, NibStyles and collectNibStyles.

1 min readv1

Exports#

Export

Signature

What it is

NibProvider

<NibProvider {...config}> or <NibProvider runtime={rt}>

starts (or adopts) the page's runtime and provides it

useNib

useNib(attr: string): string

a class string, memoised per render

nib

nib(runtime, attr): string

the non-hook variant, for handlers and helpers

useNibRuntime

useNibRuntime(): NibRuntime

the runtime itself

NibStyles

<NibStyles />

the collected CSS as a <style id="nib">

collectNibStyles

collectNibStyles(rt): string

the same CSS as a string

NibRuntime

class

re-exported, for a deliberately separate instance

nib and data-nib are declared on React's HTMLAttributes, so <div nib="…"> type-checks with no extra setup.

NibProvider#

TSX
// with a config — the documented path
<NibProvider {...nibConfig}>
  <App />
</NibProvider>

// with a runtime you own — SSR, tests, a scoped widget
<NibProvider runtime={rt}>
  <App />
</NibProvider>

useNib#

TSX
const box = useNib(`p=${pad}px; bdrd=$radius.md; bgc=$color.surface`);
return <div className={box}>…</div>;

The class is generated during render, so the element is styled on its first paint — no one-frame delay, nothing to clean up. Memoised on the attribute string, so an unchanged value costs nothing.

nib() outside a component#

TypeScript
import { nib } from "@nibcss/react";

function highlight(runtime: NibRuntime, level: "warn" | "error") {
  return nib(runtime, level === "error" ? "cl=#b91c1c; ftw=700" : "cl=#b45309");
}

SSR#

TSX
const rt = new NibRuntime({ watch: false, ...config });
const body = renderToString(<NibProvider runtime={rt}><App /></NibProvider>);
const head = `<style id="nib">${collectNibStyles(rt)}</style>`;

Next steps#