diff --git a/src/lib/LocalTheme/LocalRoot.tsx b/src/lib/LocalTheme/LocalRoot.tsx
index 0fbe642f..3c4961f5 100644
--- a/src/lib/LocalTheme/LocalRoot.tsx
+++ b/src/lib/LocalTheme/LocalRoot.tsx
@@ -1,5 +1,5 @@
-import type {HTMLAttributes, ReactNode} from 'react';
-import {createElement, forwardRef, useEffect, useMemo} from 'react';
+import type {HTMLAttributes, ReactNode, ElementType} from 'react';
+import {forwardRef, useEffect, useMemo} from 'react';
import {createStyleObject} from '@/lib/utils';
import type {DataAttributes, LibraryProps} from '@/lib/NativeProps';
@@ -12,18 +12,24 @@ export type LocalRootProps = DataAttributes &
LibraryProps &
HTMLAttributes
& {
children?: ReactNode;
- /** Choose which HTMLElement to render as a root. div is default. */
- as?: string;
- /** Apply initial theme. */
+ /** Choose which HTMLElement to render as a root. `div` is the default value. */
+ as?: ElementType;
+ /** Apply the initial theme. */
theme?: Theme;
- /** Provide theme setter function. */
+ /** Provide a theme setter function. */
setTheme?: (arg0: Theme) => void;
};
export const LocalRoot = forwardRef((props, ref) => {
// This is needed to fix an error introduced in version 0.6.14.
// Props were not transported to returned HTMLElement.
- const {children, as = 'div', theme = {}, setTheme = () => {}, ...restProps} = props;
+ const {
+ children,
+ as: Component = 'div',
+ theme = {},
+ setTheme = () => {},
+ ...restProps
+ } = props;
const initialStyle = useMemo(() => createStyleObject(theme), [theme]);
@@ -31,7 +37,11 @@ export const LocalRoot = forwardRef((props, ref) =>
setTheme(theme);
}, [theme, setTheme]);
- return createElement(as, {...restProps, style: initialStyle, ref}, children);
+ return (
+
+ {children}
+
+ );
});
LocalRoot.displayName = 'LocalRoot';
diff --git a/src/lib/LocalTheme/__snapshots__/LocalRoot.spec.tsx.snap b/src/lib/LocalTheme/__snapshots__/LocalRoot.spec.tsx.snap
index ed7cf48e..f9c62008 100644
--- a/src/lib/LocalTheme/__snapshots__/LocalRoot.spec.tsx.snap
+++ b/src/lib/LocalTheme/__snapshots__/LocalRoot.spec.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`lib > LocalRoot LocalRoot - Native API accepts ref as a Mutable Object 1`] = ``;
diff --git a/src/lib/LocalTheme/useLocalTheme.tsx b/src/lib/LocalTheme/useLocalTheme.tsx
index 1fe2f773..746d7aa6 100644
--- a/src/lib/LocalTheme/useLocalTheme.tsx
+++ b/src/lib/LocalTheme/useLocalTheme.tsx
@@ -8,8 +8,8 @@ import {LocalRoot} from './LocalRoot';
/**
* @public
- * React hook to apply multiple CSS variables to generated local root element (LocalRoot) and manipulate them.
- * Theme type is inferred from provided theme parameter.
+ * React hook to apply multiple CSS variables to a generated local root element (LocalRoot) and manipulate them.
+ * Theme type is inferred from the provided theme parameter.
* @example
* const {setTheme, getTheme, LocalRoot, getVariable, setVariable} = useLocalTheme();
* const setThemeIvory = () => {
@@ -20,7 +20,7 @@ import {LocalRoot} from './LocalRoot';
* return //...
*/
export const useLocalTheme = () => {
- const themeRef = useRef();
+ const themeRef = useRef({});
const elementRef = useRef(null);
const setTheme = useCallback((nextTheme: Theme) => {
@@ -55,13 +55,13 @@ export const useLocalTheme = () => {
return {
/** Effect to apply new theme to LocalRoot */
setTheme,
- /** Get current theme set for LocalRoot */
+ /** Get the current theme set for LocalRoot */
getTheme,
- /** Wrapper component which creates DOM node to store theme data */
+ /** Wrapper component which creates a DOM node to store theme data */
LocalRoot: MemoRoot,
/** React Mutable Ref object attached to LocalRoot */
ref: elementRef,
- /** Get variable value within LocalRoot theme */
+ /** Get variable value within the LocalRoot theme */
getVariable,
/** Effect to set new variable value within LocalRoot theme */
setVariable,
diff --git a/src/lib/RootTheme/useRootTheme.ts b/src/lib/RootTheme/useRootTheme.ts
index 07289aea..86a16b5b 100644
--- a/src/lib/RootTheme/useRootTheme.ts
+++ b/src/lib/RootTheme/useRootTheme.ts
@@ -57,6 +57,7 @@ export const useRootTheme = (
[id]
);
+ // eslint-disable-next-line react-hooks/refs
const style = useMemo(() => createStyleObject(themeRef.current), []);
return {
From ffc17b0929a7c4bc41592127122dc81c5a05a24c Mon Sep 17 00:00:00 2001
From: semantic-release-bot
Date: Tue, 16 Dec 2025 21:34:44 +0000
Subject: [PATCH 38/38] chore(release): 0.8.4 [skip ci]
## [0.8.4](https://github.com/morewings/css-vars-hook/compare/v0.8.3...v0.8.4) (2025-12-16)
### Bug Fixes
* **react-19:** ensure React 19 compatibility ([2abc1ae](https://github.com/morewings/css-vars-hook/commit/2abc1ae8ae6690df468a04640ef5cbee818fcf69))
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 251ecd4a..b9a4f824 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "css-vars-hook",
"private": false,
- "version": "0.8.3",
+ "version": "0.8.4",
"license": "MIT",
"engines": {
"node": ">=16"