History

Hsing-yu Flowers 8fe842f5a4 Add height auto on autocomplete popover button (https://github.com/woocommerce/woocommerce-admin/pull/7225 ) * Add height auto on autocomplete popover button * Add changelog Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>		2021-07-08 10:47:46 -04:00
..
src	Add height auto on autocomplete popover button (https://github.com/woocommerce/woocommerce-admin/pull/7225 )	2021-07-08 10:47:46 -04:00
.npmrc	Build: Move components to packages dir (https://github.com/woocommerce/woocommerce-admin/pull/804 )	2018-11-15 13:16:23 -05:00
CHANGELOG.md	Filters: On update respect all other queries, not just persistedQueries (https://github.com/woocommerce/woocommerce-admin/pull/7155 )	2021-07-08 09:36:34 +12:00
README.md	Revert Card component removal (https://github.com/woocommerce/woocommerce-admin/pull/7167 )	2021-06-11 14:26:02 +08:00
package.json	Make task item action button optional (https://github.com/woocommerce/woocommerce-admin/pull/7263 )	2021-07-08 09:19:35 -03: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

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