@improv/react v0.10.1

@improv/react

Tiny react bindings for @improv/core.

Try it on codesandbox.io.

Features

• SASS-like nested selectors and ampersand (&) references.
• CSS value arrays for browser compatibility fallbacks.
• At-rules (e.g. @media, @keyframes).
• Tagged templates.
• Written in Typescript.

Getting Started

import { useStyle } from "@improv/react";

export function MyComponent(): JSX.Element {
  const className = useStyle({
    color: "black",
    ":hover": {
      textDecoration: "underline",
    },
  });

  return <div className={className}>Hello, world!</div>;
}

API

Includes the @improv/core API.

Hooks

• useStyle(style, prefix?)
  • Appends a stylesheet to the document head, for the lifetime of the component.
  • An optional namespace prefix can be given.
  • Returns the unique class name used as the stylesheet namespace.

Components

• <Style value={style}>
  • Appends a global stylesheet to document head, for the lifetime of the component.