npm install --save @use-gpu/text
yarn add @use-gpu/text
Docs: https://usegpu.live/docs/reference-live-@use-gpu-traits
import { parseColor } from '@use-gpu/traits';
// Required prop: Color
const value = useProp(props.value, parseColor);
// Optional prop: (Color | null)
const value = useProp(props.value, optional(parseColor));
// Default: Color ?? parseColor("#123456")
const value = useProp(props.value, parseColor, '#123456');
Here, parseColor
will parse CSS colors like #123456
or rgba(…)
and return a normalized [r, g, b, a]
tuple.
const parsers = {...};
const defaults = {...};
// Outside a component
const useTrait = makeUseTrait(parsers, defaults);
// Inside a component
const {field} = useTrait(props);
Define a StyleTrait
mix-in, accessed via a derived useStyleTrait
hook.
type StyleTrait = {
size: number,
rounded: boolean,
color?: Color,
};
import { StyleTrait, useStyleTrait } from './traits';
type ComponentProps = Partial<StyleTrait> & {
//...
};
const Component: FC<ComponentProps> = (props: ComponentProps) => {
const {size, rounded, color} = useStyleTrait(props);
// ...
};
import {
makeUseTrait,
parseNumber,
parseBoolean,
parseColor,
} from '@use-gpu/traits';
const STYLE_TRAIT = {
size: parseNumber,
rounded: parseBoolean,
color: optional(parseColor),
};
const STYLE_DEFAULTS = {
size: 1,
rounded: true,
};
export const useStyleTrait = makeUseTrait<StyleTrait>(STYLE_TRAIT, STYLE_DEFAULTS);
Made by Steven Wittens. Part of @use-gpu
.