Collection of components for visually editing CSS declarations.
yarn add @compai/css-inputs
import { LengthInput } from '@compai/css-inputs'
Quickstart:
<LengthInput value={{ value: 16, unit: 'px' }} onChange={console.log} />
CSS inputs use a collection of data types for given types of inputs.
type CSSDataType = Length | LengthWithPercentage // | ...
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
}
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
}
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
}
enum LengthUnit {
Px = 'px',
Em = 'em',
Rem = 'rem',
// ...
}
enum LengthWithPercentageUnit {
Px = 'px',
Em = 'em',
Rem = 'rem',
Percent = '%',
// ...
}
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}`)}
/>