History

RJChow 2c630ccd9e Manually change i18n text domain from 'woocommerce-admin' to 'woocommerce' in WCA JS packages .md files		2022-04-01 11:41:32 +08:00
..
src	Manually change i18n text domain from 'woocommerce-admin' to 'woocommerce' in WCA JS packages .md files	2022-04-01 11:41:32 +08:00
.eslintrc.js	Add .eslintrc config to each packages	2022-03-29 16:08:07 +08:00
.npmrc	Moved WCA Packages	2022-03-18 14:25:26 -07:00
CHANGELOG.md	Bumped WCA JS package version numbers	2022-03-22 16:08:24 +08:00
README.md	Moved WCA Packages	2022-03-18 14:25:26 -07:00
jest.config.json	Moved WCA Packages	2022-03-18 14:25:26 -07:00
package.json	Add @babel/runtime to dev dependencies of js packages	2022-03-29 16:46:06 +08:00
project.json	Add build-watch to most js packages and remove packages watch from woocommerce-admin command	2022-03-30 11:46:12 -03:00
tsconfig-cjs.json	Moved WCA Packages	2022-03-18 14:25:26 -07:00
tsconfig.json	Moved WCA Packages	2022-03-18 14:25:26 -07:00
webpack.config.js	Moved WCA Packages	2022-03-18 14:25:26 -07:00

README.md

Components

This packages includes a library of components that can be used to create pages in the WooCommerce dashboard and reports pages.

Installation

Install the module

pnpm install @woocommerce/components --save

View the full Component documentation for usage information.

Usage

/**
 * Woocommerce dependencies
 */
import { Card } from '@woocommerce/components';

export default function MyCard() {
	return (
		<Card title="Store Performance" description="Key performance metrics">
			<p>Your stuff in a Card.</p>
		</Card>
	);
}

Many components include CSS to add style, you will need to add in order to appear correctly. Within WooCommerce, add the wc-components stylesheet as a dependency of your plugin's stylesheet. See wp_enqueue_style documentation for how to specify dependencies.

In non-WordPress projects, link to the build-style/card/style.css file directly, it is located at node_modules/@woocommerce/components/build-style/<component_name>/style.css.