**WIP** Debugging tool for live editing Styled System theme objects
WIP Debugging tool for live editing Styled System theme objects
Currently only works with Emotion
``sh`
npm i @styled-system/edit
`jsx
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@styled-system/edit'
import theme from './theme'
export default props =>
{props.children}
`
- EditProvider a stateful theme provider with context for live editing – receives theme from parent contextThemeControls
- a full, batteries-included theme editing formFieldSet
- renders fields for part of a theme objectField
- renders a form field for a single value from the theme object
`jsx
// example using FieldSet
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@styled-system/edit'
import theme from './theme'
export default props =>
{props.children}
`
`jsx
// example using Field
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@styled-system/edit'
import theme from './theme'
export default props =>
{props.children}
`
Props
- name (string) dot-notation key path for theme objecttype
- (string) type prop for child Field components (see below)ignore
- (array) array of key names to omit from the form
Props
- name (string) dot-notation key path for theme objecttype
- (string | 'number', 'select', or 'color') type of form field to renderoptions
- (array) array of options to render for select type fieldsrender` (function) render prop for custom field UI
-
MIT License