usePrismaneColor

usePrismaneColor hook provides a simple way to handle colors and custom color styles.

Import

import { usePrismaneColor } from "@prismane/core";

Usage

function Demo() {
  const { getColor } = usePrismaneColor();

  return (
    <>
      <Box w={fr(20)} h={fr(20)} bg={getColor("primary")} />
      <Box w={fr(20)} h={fr(20)} bg={getColor("primary", 200)} />
    </>
  );
}

Parsing Custom Color Styles

function Demo() {
  const { getColorStyle } = usePrismaneColor();

  return (
    <Box
      w={fr(20)}
      h={fr(20)}
      bdw={1}
      sx={{
        borderColor: getColorStyle(["base", { hover: "primary" }]),
      }}
    />
  );
}

API

Return Value

Name	Type	Description
`getColor`	`() => string`	A function that parses the color into a hex code.
`getColorStyle`	`() => string`	A function that parses the color for the `sx` prop.

getColor's Parameters

Name	Type	Description	Default
`color`	`string`	The color that is wanted.	-
`shade`	`number`	The shade of the given color that is wanted.	`500`

getColor's Return Value

Name	Type	Description
`color`	`string`	The parsed color.

Go BackResponsive Styles