@singlestone/sugar-react

Welcome to @singlestone/sugar-react 👋

React bindings for Sugar

• Prerequisites
• Installation
  • npm
  • Yarn
  • pnpm
• Setup
• Usage
• Development

Prerequisites

• NodeJS 14+
• A functioning Tailwind and Sugar setup

Installation

Install @singlestone/sugar-react with your NodeJS package manager of choice.

npm

$ npm install @singlestone/sugar-react

Yarn

$ yarn add @singlestone/sugar-react

pnpm

$ pnpm install @singlestone/sugar-react

Setup

After installation, add Sugar React to your tailwind.config.js like so:

// tailwind.config.js
module.exports = {
  mode: "jit",
  content: [
    // change this to fit your project as necessary
    "./src/**/*.{ts,tsx}",
    // add this
    "./node_modules/@singlestone/sugar-react/**/*.js",
  ],
  plugins: [require("@singlestone/sugar").sugarCorePlugin()],
};

Usage

Once you've followed the Installation and Setup process, you can import the various components in your application. All @singlestone/sugar-react components are thin wrappers around the semantic HTML elements that they represent, so you can use them exactly the same way that you'd use a normal element.

import { Select, TextInput } from "@singlestone/sugar-react";

// ...
<Label htmlFor="some-select">Options!</Label>
<Select id="some-select">
    <option disabled value="">Select an Option</option>
    <option value="option1">Option 1</option>
</Select>

You can also pass additional class names to each component - they'll be appended to the resulting element.

<Label htmlFor="some-select">Options!</Label>
<Select className="w-full" id="some-select">
    <option disabled value="">Select an Option</option>
    <option value="option1">Option 1</option>
</Select>

Development

This package is a bit unusual in how you can develop it at the moment. It follows the conventions of all the other projects by having most steps be able to be used by things depending on it (e.g., pnpm run dev outputs a built version of the library and watches for file changes). You can also start a Vite server for quick development of components (until we set up Storybook for it) via pnpm run start.