StyleContext

"use client";

import { StyleContext } from "@colonydb/anthill/StyleContext";
import { useContext } from "react";

export const ExampleComponent = ({ children }: Props) => {
  const styleContext = useContext(StyleContext);
  return (
    <div>
      color: {styleContext.color}
      <br />
      container: {styleContext.container}
      <br />
      spacing: {styleContext.spacing}
      <br />
      headingLevel: {styleContext.headingLevel}
    </div>
  );
};

"use client";

import type { StyleContextConfig } from "@colonydb/anthill";
import { useStyleContext } from "@colonydb/anthill/useStyleContext";
import { useMemo } from "react";

export const ExampleComponent = ({ children }: Props) => {
  const styleContextConfig = useMemo<StyleContextConfig>({
    container: (value) => value + 1,
    spacing: (value) => value + 1,
    headingLevel: (value) => value + 1,
  }, []);

  const { styleContext, styleContextClassName, StyleContextProvider } = useStyleContext(styleContextConfig);

  return (
    <div className={styleContextClassName}>
      <StyleContextProvider>
        container: {styleContext.container}
        <br />
        spacing: {styleContext.spacing}
        <br />
        headingLevel: {styleContext.headingLevel}
      </StyleContextProvider>
    </div>
  );
};