chakra-ui/polymorphic

Polymorphic component factories for JSX frameworks

@polymorphic-factory

Create polymorphic React/Preact/SolidJS/Vue components with a customizable styled function.

A polymorphic component is a component that can be rendered with a different element.

import { polymorphicFactory } from '@polymorphic-factory/{react,preact,solid,vue}'

const poly = polymorphicFactory()

const App = () => (
  <>
    <poly.div />
    <poly.main>
      <poly.section>
        <poly.div as="p">This is rendered as a p element</poly.div>
      </poly.section>
    </poly.main>
  </>
)

This monorepo uses pnpm as a package manager. It includes the following packages:

Packages

• react
• preact
• solid
• vue

Development

Install the dependencies with pnpm:

pnpm install

To build all packages, run the following command:

pnpm run build

To execute all test suites, run the following command:

pnpm run test

You can execute npm scripts in each package with the shortcut commands:

# pnpm run <package> <command>
pnpm run react test
pnpm run solid build

Versioning

This repository uses changesets to version and publish the packages.

To create a semver bump, create a changeset with a summary of the changes made:

pnpm changeset

License

MIT © Tim Kolberger