https://github.com/synox/s2-sandbox
https://github.com/synox/s2-sandbox
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/synox/s2-sandbox
- Owner: synox
- Created: 2025-05-21T18:46:41.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-28T19:39:26.000Z (11 months ago)
- Last Synced: 2025-07-28T21:31:50.087Z (11 months ago)
- Language: TypeScript
- Size: 125 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vite example
This is a [Vite](https://vitejs.dev/) project bootstrapped with [`create-vite`](https://github.com/vitejs/vite/tree/main/packages/create-vite).
## Getting Started
First, run the development server:
```bash
yarn install
yarn dev
```
Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
style-macro and React Spectrum - Spectrum 2 have been added to `src/App.tsx` 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 config
Edit the vite.config.ts to add an import for the plugin and add a vite config that adds the vite version of the macros plugin. An empty config file would be updated to look like the following.
```
import { defineConfig } from 'vite'
import macrosPlugin from 'unplugin-parcel-macros';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
// ...
macrosPlugin.vite()
// ..
],
})
```
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.
```jsx
Hello Spectrum 2!
```
```jsx
Hello Spectrum 2!
```
## 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";
```