CSS GUIv0.0.61PropertiesGitHub

Responsive Input

A responsive utility for creating dynamic inputs based on breakpoints.

Use this component to expose controls that target breakpoints or a single, global value. Responsive outputs contain an array of values based on the number of breakpoints in the theme.

Example

Font size
{
  "value": 16,
  "unit": "px"
}

Usage

import { useState } from 'react'
import {
  Length,
  ResponsiveLength,
  LengthInput,
  ResponsiveInput,
} from '@compai/css-gui'

const DEFAULT_VALUE = {
  value: 16,
  unit: 'px',
}
export const ResponsiveExample = () => {
  const [value, setValue] = useState<Length | ResponsiveLength>(DEFAULT_VALUE)

  return (
    <>
      <ResponsiveInput
        label="Font size"
        value={value}
        defaultValue={DEFAULT_VALUE}
        onChange={setValue}
        Component={LengthInput}
      />
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </>
  )
}