@class101/styled-system__edit
v5.3.3
Published
**WIP** Debugging tool for live editing Styled System theme objects
Downloads
9
Keywords
Readme
@class101/styled-system__edit
WIP Debugging tool for live editing Styled System theme objects
Currently only works with Emotion
npm i @class101/styled-system__edit
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@class101/styled-system__edit'
import theme from './theme'
export default props =>
<ThemeProvider theme={theme}>
<EditProvider>
{props.children}
<ThemeControls />
</EditProvider>
</ThemeProvider>
Components
EditProvider
a stateful theme provider with context for live editing – receivestheme
from parent contextThemeControls
a full, batteries-included theme editing formFieldSet
renders fields for part of atheme
objectField
renders a form field for a single value from thetheme
object
// example using FieldSet
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@class101/styled-system__edit'
import theme from './theme'
export default props =>
<ThemeProvider theme={theme}>
<EditProvider>
{props.children}
<FieldSet name='colors' />
<FieldSet name='fontSizes' />
</EditProvider>
</ThemeProvider>
// example using Field
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@class101/styled-system__edit'
import theme from './theme'
export default props =>
<ThemeProvider theme={theme}>
<EditProvider>
{props.children}
<FieldSet name='colors.text' />
<FieldSet name='colors.background' />
</EditProvider>
</ThemeProvider>
FieldSet
Props
name
(string) dot-notation key path fortheme
objecttype
(string) type prop for child Field components (see below)ignore
(array) array of key names to omit from the form
Field
Props
name
(string) dot-notation key path fortheme
objecttype
(string | 'number', 'select', or 'color') type of form field to renderoptions
(array) array of options to render forselect
type fieldsrender
(function) render prop for custom field UI
MIT License