Parcel example

This is a Parcel project with a minimal React configuration.

Getting Started

First, run the development server:

yarn install
yarn dev

Open http://localhost:1234 with your browser to see the result.

style-macro and React Spectrum - Spectrum 2 have been added to src/App.js to show an example of a Spectrum 2 styled component. This file does client side rendering. The page auto-updates as you edit the file.

Macros

Macros work out-of-the-box with Parcel, as of v2.12.0

To use the spectrum-theme via macros, pass your styles object to the style() macro and set the result as a new function. This new function or style() should be used within a className prop to style your html elements. Use the styles prop on React Spectrum components.

<div className={style({marginStart: 16})}>
  Hello Spectrum 2!
</div>

<Button styles={style({marginStart: 16})}>
  Hello Spectrum 2!
</Button>

Application setup

Please include the page level CSS in the root of your application to configure and support the light and dark themes.

import "@react-spectrum/s2/page.css";