typewritingclass-react 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +40 -0
  2. package/package.json +33 -0
  3. package/src/index.ts +1 -0
  4. package/src/server.ts +62 -0
  5. package/src/useStyle.ts +50 -0
package/README.md ADDED
@@ -0,0 +1,40 @@
1
+ # typewritingclass-react
2
+
3
+ React integration for Typewriting Class. Provides the `useStyle` hook for composing styles in React components, with memoized output and support for dynamic values.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ bun add typewritingclass-react
9
+ ```
10
+
11
+ Requires `react` (18 or 19) and `typewritingclass` as peer dependencies.
12
+
13
+ ## Usage
14
+
15
+ ```tsx
16
+ import { useStyle } from 'typewritingclass-react'
17
+ import { p, bg, rounded, when } from 'typewritingclass'
18
+ import { hover } from 'typewritingclass'
19
+ import { blue, white } from 'typewritingclass/theme/colors'
20
+
21
+ function Card() {
22
+ const props = useStyle(
23
+ p(6),
24
+ bg(white),
25
+ rounded('lg'),
26
+ when(hover)(bg(blue[50])),
27
+ )
28
+
29
+ return <div {...props}>Styled card</div>
30
+ }
31
+ ```
32
+
33
+ `useStyle` returns `{ className, style }` — spread it directly onto JSX elements. Dynamic values are automatically handled through inline `style` with CSS custom properties.
34
+
35
+ ## Exports
36
+
37
+ | Path | Description |
38
+ |---|---|
39
+ | `typewritingclass-react` | `useStyle` hook |
40
+ | `typewritingclass-react/server` | Server Components utilities (experimental) |
package/package.json ADDED
@@ -0,0 +1,33 @@
1
+ {
2
+ "name": "typewritingclass-react",
3
+ "version": "0.2.0",
4
+ "type": "module",
5
+ "exports": {
6
+ ".": {
7
+ "types": "./src/index.ts",
8
+ "default": "./src/index.ts"
9
+ },
10
+ "./server": {
11
+ "types": "./src/server.ts",
12
+ "default": "./src/server.ts"
13
+ }
14
+ },
15
+ "files": [
16
+ "src"
17
+ ],
18
+ "peerDependencies": {
19
+ "react": "^18 || ^19",
20
+ "typewritingclass": "0.2.0"
21
+ },
22
+ "devDependencies": {
23
+ "react": "^19.0.0",
24
+ "@types/react": "^19.0.0",
25
+ "vitest": "^3.0.4",
26
+ "typescript": "^5.7.3",
27
+ "typewritingclass": "0.2.0"
28
+ },
29
+ "scripts": {
30
+ "test": "vitest run",
31
+ "test:watch": "vitest"
32
+ }
33
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { useStyle } from './useStyle.ts'
package/src/server.ts ADDED
@@ -0,0 +1,62 @@
1
+ import { generateCSS } from 'typewritingclass'
2
+
3
+ /**
4
+ * Returns the current generated CSS as a raw stylesheet string.
5
+ *
6
+ * This reads from the runtime style registry, collecting all rules that
7
+ * have been registered so far and rendering them into a single CSS string.
8
+ * Useful for SSR scenarios where you need the raw CSS to inject into a
9
+ * `<style>` tag or write to a file.
10
+ *
11
+ * This function is safe to call from React Server Components since it
12
+ * does not use any client-side APIs (hooks, DOM, etc.).
13
+ *
14
+ * @returns The full CSS string for all registered style rules, or an
15
+ * empty string if no rules have been registered yet.
16
+ *
17
+ * @example
18
+ * ```ts
19
+ * import { getStyleSheet } from 'typewritingclass-react/server'
20
+ *
21
+ * const css = getStyleSheet()
22
+ * // "._a1b2c { padding: 1rem; }\n\n._d3e4f { margin: 0; }"
23
+ * ```
24
+ */
25
+ export function getStyleSheet(): string {
26
+ return generateCSS()
27
+ }
28
+
29
+ /**
30
+ * Returns the current generated CSS wrapped in a `<style>` tag string,
31
+ * ready to be injected into an HTML document during SSR.
32
+ *
33
+ * The style tag includes a `data-twc` attribute for easy identification
34
+ * and potential hydration on the client side.
35
+ *
36
+ * This function is safe to call from React Server Components since it
37
+ * does not use any client-side APIs (hooks, DOM, etc.).
38
+ *
39
+ * @returns An HTML `<style>` tag string containing all registered CSS
40
+ * rules, or an empty `<style>` tag if no rules have been registered.
41
+ *
42
+ * @example
43
+ * ```tsx
44
+ * import { getStyleTag } from 'typewritingclass-react/server'
45
+ *
46
+ * // In a server component or SSR render function:
47
+ * const styleTag = getStyleTag()
48
+ * // '<style data-twc>._a1b2c { padding: 1rem; }</style>'
49
+ *
50
+ * // Inject into the document head
51
+ * return (
52
+ * <html>
53
+ * <head dangerouslySetInnerHTML={{ __html: styleTag }} />
54
+ * <body>{children}</body>
55
+ * </html>
56
+ * )
57
+ * ```
58
+ */
59
+ export function getStyleTag(): string {
60
+ const css = generateCSS()
61
+ return `<style data-twc>${css}</style>`
62
+ }
package/src/useStyle.ts ADDED
@@ -0,0 +1,50 @@
1
+ 'use client'
2
+
3
+ import { useMemo } from 'react'
4
+ import type { StyleRule, DynamicResult } from 'typewritingclass'
5
+ import { dcx } from 'typewritingclass'
6
+
7
+ /**
8
+ * React hook that composes style rules into a `className` + `style` object.
9
+ *
10
+ * Wraps {@link dcx} in `useMemo` for stable references across re-renders.
11
+ * The returned {@link DynamicResult} object can be spread directly onto JSX
12
+ * elements, providing both the generated class name and any inline CSS custom
13
+ * property bindings needed by `dynamic()` values.
14
+ *
15
+ * The memo dependency array is the `args` array itself, so the result is
16
+ * recalculated only when the input rules or class name strings change.
17
+ *
18
+ * @param args - One or more {@link StyleRule} objects or string class names
19
+ * to compose together.
20
+ * @returns A {@link DynamicResult} with `className` and `style` properties,
21
+ * suitable for spreading onto a JSX element.
22
+ *
23
+ * @example
24
+ * ```tsx
25
+ * import { useStyle } from 'typewritingclass-react'
26
+ * import { p, bg, dynamic } from 'typewritingclass'
27
+ *
28
+ * function Card({ color }: { color: string }) {
29
+ * const props = useStyle(p(6), bg(dynamic(color)))
30
+ * return <div {...props}>Content</div>
31
+ * // Renders: <div class="_a1b _c2d" style="--twc-d0: #ff0000">Content</div>
32
+ * }
33
+ * ```
34
+ *
35
+ * @example
36
+ * ```tsx
37
+ * // Mixing style rules with plain class names
38
+ * import { useStyle } from 'typewritingclass-react'
39
+ * import { p, rounded } from 'typewritingclass'
40
+ *
41
+ * function Badge() {
42
+ * const props = useStyle(p(2), rounded('full'), 'custom-badge')
43
+ * return <span {...props}>New</span>
44
+ * // Renders: <span class="_x1y _z2w custom-badge" style={{}}>New</span>
45
+ * }
46
+ * ```
47
+ */
48
+ export function useStyle(...args: (StyleRule | string)[]): DynamicResult {
49
+ return useMemo(() => dcx(...args), args)
50
+ }