React API

Type: Component

In order for the useStyles and useClassName Hooks to work, you’ll need to render a TreatProvider higher in the tree.

import React from 'react';
import { TreatProvider } from 'react-treat';

import theme from './theme.treat.js';

export function App() {
  return <TreatProvider theme={theme}>...</TreatProvider>;
}

Type: function

A React Hook that resolves styles for an entire treat file relative to the current theme.

import React from 'react';
import { useStyles } from 'react-treat';
import * as styleRefs from './Button.treat.js';

export function Button({ primary, ...props }) {
  const styles = useStyles(styleRefs);

  return <button {...props} className={styles.button} />;
}

Type: function

A React Hook that resolves a single treat class relative to the current theme.

import React from 'react';
import { useClassName } from 'react-treat';
import * as styleRefs from './Button.treat.js';

export const Button = (props) => (
  <button
    {...props}
    className={useClassName(styles.button)}
  />
);