VTEX IO Styleguide - Preact Components

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

Installation

# 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:

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

const MyComponent = () => {
  return (
    <div>
      <Button>Click me</Button>
      <Checkbox label="Check me" />
    </div>
  )
}

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:

npm install preact
# o
yarn add preact

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

For Webpack:

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:

// 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.