Skip to Content

Chakra Factory

Chakra factory serves as an object of chakra enabled JSX elements, and also a function that can be used to enable custom component receive chakra's style props.

Chakra JSX Elements#

Create base html elements with theme-aware style props using chakra.<element> notation. For example, if you want a plain html button with ability to pass chakra styles, you can write <chakra.button />.

Editable Example

This reduces the need to create custom component wrappers and name them. This syntax is available for common html elements. See the reference for the full list of elements supported.

Chakra factory function#

This is a function that converts non-chakra components or jsx element to chakra-enabled components so you can pass style props to them.

Consider a package called react-input-autoresize, let's use the chakra factory function to make possible to pass style props.

The function will infer the prop types from the wrapped component and also add chakra style props.

Considering that Chakra uses emotion under the hood, ensure the non-chakra component accepts className as props for this to work correctly

Attaching styles#

In some instances, you might need to attach specific styles to the component wrapped in the chakra factory

You can also use the chakra factory on jsx elements as well.

Edit this page