css-vars-hook/dist/index.d.ts

css-vars-hook contains React hooks to set and manipulate CSS custom properties from React component.

/// <reference types="@/types" />

import { AriaAttributes } from 'react';
import { FC } from 'react';
import { HTMLAttributes } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { ReactNode } from 'react';
import { RefObject } from 'react';
import { ThemeType } from 'css-vars-hook';

export declare type DataAttributeKey = `data-${string}`;

export declare type DataAttributes = Record<DataAttributeKey, string>;

export declare type LibraryProps<TElement = HTMLDivElement> = AriaAttributes & {
    /** Provide an id for Provider component */
    id?: HTMLAttributes<TElement>['id'];
    /**
     * Set native ARIA role attribute
     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
     */
    role?: HTMLAttributes<TElement>['role'];
    /**
     * Specify additional CSS class. This allows you to use styled(Component)
     * or the css prop in styled-components or emotion.
     */
    className?: HTMLAttributes<TElement>['className'];
};

/**
 * @public
 */
export declare type LocalRootProps = DataAttributes & LibraryProps & HTMLAttributes<HTMLElement> & {
    children?: ReactNode;
    /** Choose which HTMLElement to render as a root. div is default. */
    as?: string;
    /** Apply initial theme. */
    theme?: ThemeType;
    /** Provide theme setter function. */
    setTheme?: (arg0: ThemeType) => void;
};

/**
 * @public
 * Root theme context provider also creates div to contain CSS properties.
 * `ThemeType` is declared globally.
 * @see ThemeType
 * @see https://github.com/morewings/css-vars-hook#type-safety
 */
export declare const RootThemeProvider: FC<RootThemeProviderProps>;

/**
 * @public
 */
export declare type RootThemeProviderProps = DataAttributes & LibraryProps & {
    children: ReactNode;
    theme: ThemeType;
};

/**
 * @public
 */
export declare type UnitType = string | number;

/**
 * @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.
 * @example
 * const {setTheme, getTheme, LocalRoot, getVariable, setVariable} = useLocalTheme();
 * const setThemeIvory = () => {
 *   setTheme({foo: 'ivory'});
 *   console.log('full theme', getTheme()) // => {foo: 'ivory'};
 *   console.log('foo value', getVariable('foo')) // => 'ivory';
 *};
 * return <LocalRoot theme={{foo: 'bar'}} className="demo-local">//...
 */
export declare const useLocalTheme: <TElement extends HTMLElement>() => {
    /** Effect to apply new theme to LocalRoot */
    setTheme: (nextTheme: ThemeType) => void;
    /** Get current theme set for LocalRoot */
    getTheme: () => ThemeType | undefined;
    /** Wrapper component which creates DOM node to store theme data */
    LocalRoot: ({ children, ...restProps }: Omit<LocalRootProps, 'setTheme'>) => JSX_2.Element;
    /** React Mutable Ref object attached to LocalRoot */
    ref: RefObject<TElement>;
    /** Get variable value within LocalRoot theme */
    getVariable: (variableName: string) => UnitType | undefined;
    /** Effect to set new variable value within LocalRoot theme */
    setVariable: (variableName: string, variableValue: UnitType) => void;
};

/**
 * @public
 * React hook to apply multiple CSS variables to theme root and manipulate them.
 * `ThemeType` is defined on project level.
 * @see ThemeType
 * @see https://github.com/morewings/css-vars-hook#type-safety
 */
export declare const useRootTheme: () => {
    /** Effect to apply new theme to the application */
    setTheme: (nextTheme: ThemeType) => void;
    /** Get current theme */
    getTheme: () => ThemeType;
    /** Effect to set new variable value within active theme */
    setVariable: (variableName: string, value: UnitType) => void;
    /** Get variable value within active theme */
    getVariable: (variableName: string) => string;
    /** Effect to remove variable within active theme */
    removeVariable: (variableName: string) => void;
};

export { }