Cerberus Factory

Overview

Cerberus factory serves as a way to create supercharged JSX component from any HTML element to enable them receive asChild and css props.

1
import { cerberus } from "@cerberus/react"

JSX Element

With the JSX factory, you can use cerberus.<element> syntax to create JSX elements that support css and asChild props.

1
import { cerberus } from "@cerberus/react"
2

3
function Example() {
4
  return <cerberus.button css={{ color: 'blue' }}>Click me</cerberus.button>
5
}

Factory function

Use the cerberus function to convert native element components.

1
const Link = cerberus("a")
2

3
function Example() {
4
  return <Link css={{ color: 'blue' }} href="https://chakra-ui.com" />
5
}

Default Props

Use the defaultProps option to pass default props to the component.

1
const Button = cerberus("button", {
2
  type: "button"
3
})

This example creates a button component that has the type="button" attribute applied to it.

Creating Primitives

You can create a Cerberus primitive with the createCerberusPrimitive function. This is useful for creating components that have a specific recipe or style.

All primitives created with any of the higher order functions it returns will also have the css and asChild props available.

Additionally, you may pass in any reference to an Element or a string name of a HTML element for your component.

withNoRecipe

Creates a Cerberus component with bare features and no recipe. It is the what cerberus function does under the hood.

1
import { cerberus, createCerberusPrimitive } from "@cerberus/react"
2

3
const { withNoRecipe } = createCerberusPrimitive()
4

5
const Button = withNoRecipe(cerberus.button)
6

7
function Example() {
8
  return <Button css={{ color: 'blue' }}>Click me</Button>
9
}

withRecipe

Creates a Cerberus component with a specific recipe applied. This allows you to use the styles defined in the recipe.

1
import { cerberus, createCerberusPrimitive } from "@cerberus/react"
2
import { button } from "@/system/recipes"
3

4
const { withRecipe } = createCerberusPrimitive(button)
5
const Button = withRecipe('button')
6

7
function Example() {
8
  return <Button css={{ color: 'blue' }}>Click me</Button>
9
}

This example creates a button component that has the button recipe styles applied to it. The css prop can be used to override or extend the styles defined in the recipe when needed.

withSlotRecipe

Creates a Cerberus component with a specific recipe applied at the slot level. This is useful for creating components that have multiple slots with different styles.

1
import { cerberus, createCerberusPrimitive } from "@cerberus/react"
2
import { field } from "@system/recipes/slots"
3

4
const { withSlotRecipe } = createCerberusPrimitive(field)
5

6
const Field = withSlotRecipe("div", "root")
7
const FieldLabel = withSlotRecipe("label", "label")
8
const FieldInput = withSlotRecipe("input", "input")
9

10
function Example() {
11
  return (
12
    <Field css={{ color: 'blue' }}>
13
      <FieldLabel>Label</FieldLabel>
14
      <FieldInput type="text" />
15
    </Field>
16
  )
17
}

In this example, we create a field component with a root slot, label slot, and input slot. Each slot can have its own styles defined in the recipe, and the css prop can be used to override or extend the styles when needed.

Polymorphism

Every component created with the cerberus factory can accept the asChild props to change the underlying DOM element.

1
<Button asChild>
2
  <a href="https://cerberus.digitalu.design/">Cerberus</a>
3
</Button>