@prestashopcorp/puik-web-components v2.0.0-beta.0
About The Project
Puik Web Components is a library that aims to provide a complete set of reusable web components based on the PrestaShop Design System for all the PrestaShop ecosystem.
Prerequisites
- Node.js LTS is required.
Installation
# NPM
$ npm install @prestashopcorp/puik-web-components --save
# Yarn
$ yarn add @prestashopcorp/puik-web-components
# pnpm
$ pnpm install @prestashopcorp/puik-web-components
Using Puik Web Components
Global registration
To use all Puik web components in your application, you first need to import and initialize them. Here’s how you can do it:
import {
initAllWeb,
PuikExampleCe,
PuikAnotherExampleCe,
// other components...
} from @prestashopcorp/puik-web-components
Then, run the following function in your application:initAllWeb();
For each component, it replaces 'ce' in the component's name with the provided suffix to form the tagname
.
If no suffix is provided, 'ce' is used as the default suffix
Here’s how you can do it:
// Initialize all web components without argument
initAllWeb(); // The tagname for PuikExampleCe will default to 'puik-example-ce'
// Initialize all web components with 'mySuffix' as the suffix
initAllWeb('mySuffix'); // The tagname for PuikExampleCe will be 'puik-example-mySuffix'
On-demand Registration
If you only want to use a specific component in your application, you can import and initialize it individually. In this case you can name your web-component whatever you want.
Here’s how you can do it:
import { initCe, PuikExampleCe } from @prestashopcorp/puik-web-components
Then, run the following function in your application:
initCe('your-tagname-here', PuikExampleCe);
Then, use your web-component:
<your-tagname-here>
...
</your-tagname-here>