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 {
diff --git a/vite.config.build.ts b/vite.config.build.ts
index 2254603c..8b8ff83e 100644
--- a/vite.config.build.ts
+++ b/vite.config.build.ts
@@ -1,13 +1,12 @@
import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
-// @ts-expect-error no types
-import hq from 'alias-hq';
+import {kitchen} from 'alias-kitchen';
import postcssPresetEnv from 'postcss-preset-env';
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
- alias: hq.get('rollup'),
+ alias: kitchen({recipe: 'vite'}),
},
plugins: [react()],
base: '/css-vars-hook/',
diff --git a/vite.config.ts b/vite.config.ts
index a020920d..cd4a0d95 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,14 +2,14 @@ import {resolve} from 'path';
import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
-import hq from 'alias-hq';
+import {kitchen} from 'alias-kitchen';
import external from '@yelo/rollup-node-external';
import dts from 'vite-plugin-dts';
import postcssPresetEnv from 'postcss-preset-env';
export default defineConfig({
resolve: {
- alias: hq.get('rollup'),
+ alias: kitchen({recipe: 'vite'}),
},
plugins: [react(), dts({rollupTypes: true})],
build: {