@justeattakeaway/pie-spinner
v1.0.0
Published
PIE Design System Spinner built using Web Components
Downloads
2,141
Maintainers
Keywords
Readme
Table of Contents
pie-spinner
pie-spinner
is a Web Component built using the Lit library.
This component can be easily integrated into various frontend frameworks and customized through a set of properties.
Installation
To install pie-spinner
in your application, run the following on your command line:
npm i @justeattakeaway/pie-spinner
yarn add @justeattakeaway/pie-spinner
For full information on using PIE components as part of an application, check out the Getting Started Guide.
Importing the component
JavaScript
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
import { PieSpinner } from '@justeattakeaway/pie-spinner';
// If you don't need to reference the imported object, you can simply
// import the module which registers the component as a custom element.
import '@justeattakeaway/pie-spinner';
React
// React
// For React, you will need to import our React-specific component build
// which wraps the web component using @lit/react
import { PieSpinner } from '@justeattakeaway/pie-spinner/dist/react';
[!NOTE] When using the React version of the component, please make sure to also include React as a peer dependency in your project.
Peer Dependencies
[!IMPORTANT] When using
pie-spinner
, you will also need to include a couple of dependencies to ensure the component renders as expected. See the PIE Wiki for more information and how to include these in your application.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| size | String
| medium
| Size of the spinner, one of sizes
– xsmall
, small
, medium
, large
, xlarge
|
| variant | String
| brand
| Variant of the spinner, one of variants
– brand
, secondary
, inverse
|
| aria | Object
| undefined
| An object representing the aria attributes such as label;
In your markup or JSX, you can then use these to set the properties for the pie-spinner
component:
<!-- Native HTML -->
<pie-spinner></pie-spinner>
<!-- JSX -->
<PieSpinner></PieSpinner>
Contributing
Check out our contributing guide for more information on local development and how to run specific component tests.