CSS Inputs

Collection of components for visually editing CSS declarations.

Installation

yarn add @compai/css-inputs

Usage

import { LengthInput } from '@compai/css-inputs'

Quickstart:

<LengthInput value={{ value: 16, unit: 'px' }} onChange={console.log} />

Data types

CSS inputs use a collection of data types for given types of inputs.

type CSSDataType = Length | LengthWithPercentage // | ...

Length

A length is a representation of a distance value. It's common for CSS properties including height, width, padding, font-size, and more.

type Length = {
  value: string | number
  unit: LengthUnit
}

LengthWithPercentage

Only certain properties allow for a percentage unit to be set for length, so this type is a superset of length which includes the percentage unit.

type Length = {
  value: string | number
  unit: LengthWithPercentageUnit
}

Theme aliases

If theme values are a passed to an input, a ThemeUnit will be selectable and will return a ThemeValue which is useful for inputs that can be constrained to a subset of values.

type ThemeValue = {
  value: string | number
  initialValue: CSSDataType
}

Units

enum LengthUnit {
  Px = 'px',
  Em = 'em',
  Rem = 'rem',
  // ...
}

enum LengthWithPercentageUnit {
  Px = 'px',
  Em = 'em',
  Rem = 'rem',
  Percent = '%',
  // ...
}

String and number values

You can pass a string or number value to any CSS input. The value will be parsed into a relevant type, like Length, and that type will be returned rather than the input string or number.

To get the new CSS string you can use a template string before calling your updater:

<LengthInput
  value="16px"
  onChange={({ value, unit }) => console.log(`${value}${unit}`)}
/>

References