VTEX IO Styleguide - Preact Components

This package contains the Preact version of the VTEX IO Styleguide components.

Installation

``bash


npm

npm install vtex-io-styleguide-preact

yarn

yarn add vtex-io-styleguide-preact

pnpm

pnpm add vtex-io-styleguide-preact
`

Usage

To use these components in your Preact project:

`jsx
import { Button, Checkbox } from 'vtex-io-styleguide-preact'

const MyComponent = () => {
return (



)
}
`

Configuration

To use these components in your Preact project, you need to configure the project to use Preact's compatibility layer with React:

1. Install Preact:
`bash
npm install preact


o


yarn add preact
`

2. Configure your build system (Webpack, Vite, etc.) to alias React to Preact:

For Webpack:
`js
module.exports = {
// ...other config
resolve: {
alias: {
'react': 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react-dom': 'preact/compat', // Must be below test-utils
'react/jsx-runtime': 'preact/jsx-runtime'
}
}
}
`

For Vite:
`js
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
// ...other config
resolve: {
alias: {
'react': 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react-dom': 'preact/compat',
'react/jsx-runtime': 'preact/jsx-runtime'
}
}
})
`

Components

The same components available in the React version are available in the Preact version. All React imports have been automatically replaced with Preact equivalents.

Development

The components in this folder are automatically generated from the components in the library folder during the build process. Do not edit files in this folder directly.

To contribute to these components, modify the source in the library folder instead. During the build process, all React imports are automatically converted to Preact imports.

If you need to add new React components, just add them to the library` folder, and they will be automatically converted to Preact components during the build process.