feat: add a useCSS hook (#13)

dash-ui · Sep 2, 2022 · 5fd1ed9 · 5fd1ed9
1 parent f856fcb
commit 5fd1ed9
Show file tree

Hide file tree

Showing 6 changed files with 816 additions and 792 deletions.
diff --git a/README.md b/README.md
@@ -71,11 +71,12 @@ const Heading = () => {
 
 ### Hooks
 
-| Hook                        | Description                                                                                                                                          |
-| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [`useGlobal()`](#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()`](#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()`](#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. |
+| Hook                        | Description                                                                                                                                                             |
+| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`useCSS()`](#usecss)       | A hook for [performantly and reliably](https://github.com/reactwg/react-18/discussions/110) inserting CSS into the DOM in React 18 using the `useInsertionEffect` hook. |
+| [`useGlobal()`](#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()`](#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()`](#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
 
@@ -134,6 +135,44 @@ export const App = () => {
 
 ---
 
+### useCSS()
+
+A hook for [performantly and reliably](https://github.com/reactwg/react-18/discussions/110) inserting CSS into the DOM in React 18 using the
+`useInsertionEffect` hook.
+
+#### Example
+
+[Play with an example on **CodeSandbox**](https://codesandbox.io/s/dash-ui-react-usecss-example-gi3o6o)
+
+```tsx
+import * as React from "react";
+import { createStyles } from "@dash-ui/styles";
+import { useGlobal } from "@dash-ui/react";
+
+const styles = createStyles();
+
+const Component = () => {
+  const classes = useCSS(styles, {
+    root: styles.one({ display: "flex", gap: "2rem" }),
+  });
+
+  return (
+    <div className={classes.root}>
+      <div>Hello</div>
+      <div>World</div>
+    </div>
+  );
+};
+```
+
+#### Returns
+
+```typescript
+Record<ClassNames, string>;
+```
+
+---
+
 ### useGlobal()
 
 A hook for inserting transient global styles into the DOM. These styles will be

diff --git a/package.json b/package.json
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@commitlint/cli": "^9.0.1",
     "@commitlint/config-conventional": "^9.0.1",
-    "@dash-ui/styles": "^1.0.1",
+    "@dash-ui/styles": "^1.1.1",
     "@semantic-release/changelog": "^6.0.0",
     "@semantic-release/git": "^10.0.0",
     "@swc-node/core": "^1.6.0",