GitHub - dash-ui/react: React components and hooks for @dash-ui

React components and hooks for dash-ui

npm i @dash-ui/react

Quick Start

NOTE: You do not need to use this package to use @dash-ui with React. This merely provides a few useful utilities, particularly on the server-side.

Check out an example on CodeSandbox

import{createStyles}from"@dash-ui/styles";import{useGlobal}from"@dash-ui/react";conststyles=createStyles({tokens: {color: {primary: "#ee5b5f",},},});constHeading=()=>{useGlobal(styles,({ color })=>` h1 { font-size: 2rem; font-family: -apple-system, sans-serif; color: ${color.primary}; } `,[]);return<h1>Hello world</h1>;};

API docs

Components

Component	Description
`<Inline>`	A component for creating an inline `<style>` tag that is unmounted when the component unmounts.

Hooks

Hook	Description
`useCSS()`	A hook for performantly and reliably inserting CSS into the DOM in React 18 using the `useInsertionEffect` hook.
`useGlobal()`	A hook for inserting transient global styles into the DOM. These styles will be injected when the hook mounts and flushed when the hook unmounts.
`useTokens()`	A hook for inserting transient CSS tokens into the DOM. These tokens will be injected when the hook mounts and flushed when the hook unmounts.
`useThemes()`	A hook for inserting transient CSS theme tokens into the DOM. These tokens will be injected when the hook mounts and flushed when the hook unmounts.

Server rendering

	Description
`<Style>`	A React component for injecting SSR CSS styles into Next.js documents.
`toComponent()`	A function for creating a React `<style>` component for inserting Dash styles in SSR.
`createGatsbyRenderer`	Creates a Gatsby replaceRenderer for injecting styles generated by Dash on the server into the Gatsby `<head>` component

TypeScript support

Dash is written in TypeScript. It's also strongly typed, creating a beautiful IntelliSense experience in VSCode and providing solid insurance to your TypeScript application.

	Description
Strongly typed tokens	Learn how to add autocomplete and type safety to your CSS tokens.
Strongly typed themes	Learn how to add autocomplete and type safety to your CSS variable themes.

<Inline>

A component for creating an inline <style> tag that is unmounted when the component unmounts.

Example

Play with an example on CodeSandbox

import*asReactfrom'react'import{styles}from'@dash-ui/styles'import{Inline}from'@dash-ui/react'exportconstApp=()=>{return(<React.Fragment><Inlinestyles={styles}css={` .heading { font-size: 2rem; font-family: -apple-system, sans-serif; } `}><h1className='heading'>Hello world</h1></React.Fragment>
)
}

Props

Prop	Type	Required?	Description
styles	`Styles<DashTokens, DashThemes>`	Yes	A `styles` instance.
css	`StyleValue<DashTokens>`	Yes	The CSS you want to inline in the DOM.

useCSS()

A hook for performantly and reliably inserting CSS into the DOM in React 18 using the useInsertionEffect hook.

Example

Play with an example on CodeSandbox

import*asReactfrom"react";import{createStyles}from"@dash-ui/styles";import{useGlobal}from"@dash-ui/react";conststyles=createStyles();constComponent=()=>{constclasses=useCSS(styles,{root: styles.one({display: "flex",gap: "2rem"}),});return(<divclassName={classes.root}><div>Hello</div><div>World</div></div>);};

Returns

Record<ClassNames,string>;

useGlobal()

A hook for inserting transient global styles into the DOM. These styles will be injected when the hook mounts and flushed when the hook unmounts.

Example

Play with an example on CodeSandbox

import*asReactfrom"react";import{createStyles}from"@dash-ui/styles";import{useGlobal}from"@dash-ui/react";conststyles=createStyles();constComponent=()=>{useGlobal(styles,{body: {minHeight: "100vh",backgroundColor: "#ee5b5f",color: "#fff",fontFamily: "Inter, -apple-system, sans-serif",},h1: {margin: "1rem",fontSize: "3rem",},},[]);return(<div><h1>Hello world</h1></div>);};

Returns

null;

useTokens()

A hook for inserting transient CSS tokens into the DOM. These tokens will be injected when the hook mounts and flushed when the hook unmounts.

Example

Play with an example on CodeSandbox

import*asReactfrom"react";import{createStyles}from"@dash-ui/styles";import{useThemes}from"@dash-ui/react";conststyles=createStyles({tokens: {primaryColor: "#ee5b5f",},});constComponent=()=>{const[primaryColor,setPrimaryColor]=React.useState("#ee5b5f");useTokens(styles,{ primaryColor },[primaryColor]);return(<div><divclassName={styles.cls(({ primaryColor })=>` width: 200px; height: 200px; background-color: ${primaryColor}; `)}/><label><h4>Primary color</h4><inputvalue={primaryColor}onChange={(e)=>setPrimaryColor(e.target.value)}/></label></div>);};

Arguments

functionuseTokens(value: PartialDeep<DashTokens>|Falsy,deps?: React.DependencyList);

| Argument | Type | Required? | Description | | -------- | -------------------------------- | --------- | --------------------------------------------------------------- | ------------------------------------------------------------------ | | styles | Styles<DashTokens, DashThemes> | Yes | A styles instance. | | value | PartialDeep<DashTokens> | Falsy | Yes | CSS tokens to inject into the DOM and flush when the hook unmounts | | deps | React.DependencyList | No | A dependency array that will force the hook to re-insert tokens |

Returns

null;

useThemes()

A hook for inserting transient CSS theme tokens into the DOM. These tokens will be injected when the hook mounts and flushed when the hook unmounts.

Example

Play with an example on CodeSandbox

import*asReactfrom"react";import{createStyles}from"@dash-ui/styles";import{useThemes}from"@dash-ui/react";conststyles=createStyles({themes: {// Light mode CSS tokenslight: {primaryColor: "#ee5b5f",},// Dark mode CSS tokensdark: {primaryColor: "#272727",},},});constComponent=()=>{const[mode,setMode]=React.useState("light");const[darkModePrimary,setDarkModePrimary]=React.useState("#272727");const[lightModePrimary,setLightModePrimary]=React.useState("#ee5b5f");useThemes({light: {primaryColor: lightModePrimary,},dark: {primaryColor: darkModePrimary,},},[darkModePrimary,lightModePrimary]);return(<bodyclassName={styles.theme(mode)}><divclassName={styles.cls(({ primaryColor })=>` width: 200px; height: 200px; background-color: ${primaryColor}; `)}/><div><buttononClick={()=>setMode((mode)=>(mode==="light" ? "dark" : "light"))}>
Switch to {mode==="light" ? "dark" : "light"} mode
</button></div><label><h4>Light mode primary color</h4><inputvalue={lightModePrimary}onChange={(e)=>setLightModePrimary(e.target.value)}/></label><label><h4>Dark mode primary color</h4><inputvalue={darkModePrimary}onChange={(e)=>setDarkModePrimary(e.target.value)}/></label></body>);};

Arguments

functionuseThemes(styles,value: PartialDeep<DashThemes>|Falsy,deps?: React.DependencyList);

Argument	Type	Required?	Description
styles	`Styles<DashTokens, DashThemes>`	Yes	A `styles` instance.
value	`PartialDeep<DashThemes>\| Falsy`	Yes	Themes to inject into the DOM and flush when the hook unmounts
deps	`React.DependencyList`	No	A dependency array that will force the hook to re-insert themes

Returns

null;

<Style>

A React component for injecting SSR CSS styles into Next.js documents.

Example

// _document.jsimportReactfrom"react";importDocumentfrom"next/document";import{styles}from"@dash-ui/styles";import{Style}from"＠dash-ui/react/server";exportdefaultclassMyDocumentextendsDocument{staticasyncgetInitialProps(ctx){constinitialProps=awaitDocument.getInitialProps(ctx);return{
...initialProps,styles: (<React.Fragment>{initialProps.styles}<Stylehtml={initialProps.html}styles={styles}/></React.Fragment>),};}}

Props

Prop	Type	Required?	Description
html	`string`	Yes	HTML generated by Next.js, `renderToStaticMarkup()` or `renderToString()`
styles	`Styles<DashTokens, DashThemes>`	No	An instance of `styles`. Defaults to the default styles instance in `@dash-ui/styles`.

toComponent()

A function for creating a React <style> component for inserting Dash styles in SSR.

Example

// _document.jsimportReactfrom"react";importDocumentfrom"next/document";import{styles}from"@dash-ui/styles";import{toComponent}from"＠dash-ui/react/server";exportdefaultclassMyDocumentextendsDocument{staticasyncgetInitialProps(ctx){constinitialProps=awaitDocument.getInitialProps(ctx);return{
...initialProps,styles: (<React.Fragment>{initialProps.styles}{toComponent(initialProps.html,styles)}</React.Fragment>),};}}

Arguments

functiontoComponent(html: string,styles: Styles=defaultStyles): React.ReactElement;

Argument	Type	Required?	Description
html	`string`	Yes	The HTML generated by `renderToStaticMarkup()` or `renderToString()`
styles	`Styles<DashTokens, DashThemes>`	No	An instance of `styles`. Defaults to the default styles instance in `@dash-ui/styles`.

Returns

React.ReactElement;// A <style> element

createGatsbyRenderer()

Creates a Gatsby replaceRenderer for injecting styles generated by Dash on the server into the Gatsby <head> component.

Example

// gatsby-ssr.jsconst{ styles }=require("@dash-ui/styles");exports.replaceRenderer=require("＠dash-ui/react/server").createGatsbyRenderer(styles);

Arguments

functioncreateGatsbyRenderer(styles: Styles=defaultStyles);

Argument	Type	Required?	Description
styles	`Styles<DashTokens, DashThemes>`	Yes	An instance of `styles`. Defaults to the default styles instance in `@dash-ui/styles`.

Returns

functionreplaceRenderer<P=any>(props: P): P;// A Gatsby replace renderer

Strongly typed tokens

To use variable types with @dash-ui/react, you have to use the module declaration pattern:

Play with this example on CodeSandbox

consttokens={color: {red: "#c17",},};typeAppTokens=typeoftokens;declare module "@dash-ui/styles"{exportinterfaceDashTokensextendsAppTokens{}}// OR alternativelydeclare module "@dash-ui/styles"{exportinterfaceDashTokens{color: {red: string;};}}

Strongly typed themes

To use variable/theme types with @dash-ui/react, you have to use the module declaration pattern:

Play with the example on CodeSandbox

constthemes={light: {color: {// var(--color-bg)bg: "#fafafa",},},dark: {color: {// var(--color-bg)bg: "#1a1a1a",},},};typeAppThemes=typeofthemes;typeAppTokens=AppThemes["dark"]&AppThemes["light"];declare module "@dash-ui/styles"{exportinterfaceDashTokensextendsAppTokens{}exportinterfaceDashThemesextendsAppThemes{}}// OR alternativelydeclare module "@dash-ui/styles"{exportinterfaceDashTokens{color: {bg: string;};}exportinterfaceDashThemes{light: DashTokens;dark: DashTokens;}}

LICENSE

MIT

Name		Name	Last commit message	Last commit date
.github		.github
.husky		.husky
server		server
src		src
test		test
types		types
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
lundle.config.js		lundle.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.json		tsconfig.json

Uh oh!

Latest commit

History

Folders and files

Repository files navigation

Quick Start

API docs

Components

Hooks

Server rendering

TypeScript support

<Inline>

Example

Props

useCSS()

Example

Returns

useGlobal()

Example

Returns

useTokens()

Example

Arguments

Returns

useThemes()

Example

Arguments

Returns

<Style>

Example

Props

toComponent()

Example

Arguments

Returns

createGatsbyRenderer()

Example

Arguments

Returns

Strongly typed tokens

Strongly typed themes

LICENSE

About

Topics

Resources

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages