treat

React API

Note: React is not required to use treat.

TreatProvider

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>; }

useStyles

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} />; }

useClassName

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)} /> );