0.14.7 • Published 2 years ago

@theme-ui/editor v0.14.7

Weekly downloads
99
License
MIT
Repository
github
Last release
2 years ago

@theme-ui/editor

Components for editing Theme UI context, themes, and elements

Theme Context Editing

import React from 'react'
import {
  Editor,
  Row,
  Fonts,
  FontSizes,
  FontWeights,
  LineHeights,
  ColorMode,
  ColorPalette,
  Space,
} from '@theme-ui/editor'

export default props =>
  <Editor>
    <Fonts />
    <Row>
      <FontSizes />
    </Row>
    <Row>
      <FontWeights />
    </Row>
    <Row>
      <LineHeights />
    </Row>
    <ColorMode />
    <ColorPalette />
    <Row>
      <Space />
    </Row>
  </Editor>

Manually passing context

Pass a Theme UI context manually to the Editor component when you don't want to edit the pages theming context.

import React from 'react'
import {
  Editor,
  Fonts,
} from '@theme-ui/editor'
import merge from 'lodash.merge'

const reducer = (state, next) => merge({}, state, next)
const defaultTheme = {
  fonts: {
    body: 'system-ui, sans-serif',
    heading: 'Georgia, serif',
  },
}

export default props => {
  const [theme, setTheme] = useReducer(reducer, defaultTheme)
  const context = {
    theme,
    setTheme,
  }

  return (
    <Editor context={context}>
      <Fonts />
    </Editor>
  )
}

theme.styles

Use these components to edit an element in theme.styles

import React from 'react'
import {
  Editor,
  StylesForm,
} from '@theme-ui/editor'

export default props =>
  <Editor>
    <code>theme.styles.h1</code>
    <StylesForm tag='h1' />
    <code>theme.styles.h2</code>
    <StylesForm tag='h2' />
  </Editor>

sx editor

To edit arbitrary sx style objects, use the following forms:

import React from 'react'
import {
  SxTypography,
  SxMargin,
  SxColors,
} from '@theme-ui/editor'
import { useReducer } from 'react'
import merge from 'lodash.merge'
import theme from './theme'

const reducer = (state, next) => merge({}, state, next)

export default props => {
  const [style, setStyle] = useReducer(reducer, {
    fontFamily: 'system-ui, sans-serif',
    color: 'tomato',
  })

  return (
    <div>
      <SxTypography
        value={style}
        onChange={setStyle}
        theme={theme}
      />
      <SxMargin
        value={style}
        onChange={setStyle}
        theme={theme}
      />
      <SxColors
        value={style}
        onChange={setStyle}
        theme={theme}
      />
    </div>
  )
}
0.14.6

2 years ago

0.14.7

2 years ago

0.15.0-develop.8

2 years ago

0.15.0-develop.9

2 years ago

0.15.0-develop.6

2 years ago

0.15.0-develop.7

2 years ago

0.15.0-develop.5

2 years ago

0.14.4-develop.1

2 years ago

0.14.4-develop.0

2 years ago

0.14.5-develop.0

2 years ago

0.14.5

2 years ago

0.14.3

2 years ago

0.14.4

2 years ago

0.15.0-develop.4

2 years ago

0.15.0-develop.2

2 years ago

0.15.0-develop.3

2 years ago

0.15.0-develop.0

2 years ago

0.15.0-develop.1

2 years ago

0.14.3-develop.1

2 years ago

0.14.3-develop.0

2 years ago

0.14.2-develop.2

2 years ago

0.14.2

2 years ago

0.14.1-develop.0

2 years ago

0.14.2-develop.1

2 years ago

0.14.2-develop.0

2 years ago

0.14.0

2 years ago

0.14.1

2 years ago

0.13.1-develop.9

2 years ago

0.13.1-develop.8

2 years ago

0.13.1-develop.7

2 years ago

0.13.1-develop.6

2 years ago

0.13.1-develop.5

2 years ago

0.13.1-develop.4

2 years ago

0.13.1-develop.3

2 years ago

0.13.1-develop.2

2 years ago

0.13.1-develop.1

2 years ago

0.13.1

2 years ago

0.14.0-develop.0

2 years ago

0.14.0-develop.2

2 years ago

0.14.0-develop.1

2 years ago

0.14.0-develop.4

2 years ago

0.14.0-develop.3

2 years ago

0.14.0-develop.6

2 years ago

0.14.0-develop.5

2 years ago

0.14.0-develop.8

2 years ago

0.14.0-develop.7

2 years ago

0.14.0-develop.9

2 years ago

0.13.1-develop.0

2 years ago

0.13.0

2 years ago

0.12.2-develop.7

2 years ago

0.12.2-develop.8

2 years ago

0.12.2-develop.5

2 years ago

0.12.2-develop.6

2 years ago

0.12.2-develop.3

2 years ago

0.12.2-develop.4

2 years ago

0.12.2-develop.1

2 years ago

0.12.2-develop.2

2 years ago

0.12.2-develop.0

2 years ago

0.12.1

2 years ago

0.13.0-develop.0

2 years ago

0.13.0-develop.1

2 years ago

0.12.1-develop.2

3 years ago

0.12.1-develop.3

3 years ago

0.12.1-develop.0

3 years ago

0.12.1-develop.1

3 years ago

0.12.1-develop.6

3 years ago

0.12.1-develop.4

3 years ago

0.12.1-develop.5

3 years ago

0.12.0

3 years ago

0.12.0-develop.0

3 years ago

0.11.4-develop.1

3 years ago

0.11.4-develop.0

3 years ago

0.11.4-develop.9

3 years ago

0.11.4-develop.8

3 years ago

0.11.4-develop.7

3 years ago

0.11.4-develop.6

3 years ago

0.11.4-develop.5

3 years ago

0.11.4-develop.4

3 years ago

0.11.4-develop.3

3 years ago

0.11.4-develop.2

3 years ago

0.11.3

3 years ago

0.11.3-develop.5

3 years ago

0.11.3-develop.3

3 years ago

0.11.3-develop.4

3 years ago

0.11.3-develop.0

3 years ago

0.11.3-develop.1

3 years ago

0.11.3-develop.2

3 years ago

0.11.2

3 years ago

0.11.2-develop.3

3 years ago

0.11.2-develop.4

3 years ago

0.11.2-develop.1

3 years ago

0.11.2-develop.0

3 years ago

0.11.2-develop.2

3 years ago

0.11.0

3 years ago

0.11.1

3 years ago

0.11.0-develop.1

3 years ago

0.11.0-develop.2

3 years ago

0.11.0-develop.0

3 years ago

0.10.0

3 years ago

0.9.2-develop.6

3 years ago

0.10.1-develop.0

3 years ago

0.9.2-develop.4

3 years ago

0.9.2-develop.5

3 years ago

0.9.2-develop.0

3 years ago

0.9.2-develop.1

3 years ago

0.9.0

3 years ago

0.9.1

3 years ago

0.9.1-develop.0

3 years ago

0.9.0-develop.1

3 years ago

0.8.4

3 years ago

0.8.3-develop.0

3 years ago

0.7.3-develop.0

3 years ago

0.7.4

3 years ago

0.7.3

3 years ago

0.8.4-develop.0

3 years ago

0.7.4-develop.0

3 years ago

0.7.4-develop.2

3 years ago

0.7.4-develop.1

3 years ago

0.8.1

3 years ago

0.8.0

3 years ago

0.8.3

3 years ago

0.8.2

3 years ago

0.8.5-develop.0

3 years ago

0.7.5-develop.0

3 years ago

0.8.2-develop.0

3 years ago

0.8.2-develop.1

3 years ago

0.8.2-develop.2

3 years ago

0.7.5

3 years ago

0.9.0-develop.0

3 years ago

0.8.0-develop.0

3 years ago

0.7.2

3 years ago

0.7.1

3 years ago

0.7.1-develop.0

3 years ago

0.7.0

3 years ago

0.7.0-develop.0

3 years ago

0.6.2

3 years ago

0.6.1

3 years ago

0.6.0

3 years ago

0.6.0-alpha.8

3 years ago

0.6.0-alpha.7

3 years ago

0.6.0-alpha.6

3 years ago

0.6.0-alpha.5

3 years ago

0.3.5

3 years ago

0.6.0-alpha.4

3 years ago

0.6.0-alpha.3

3 years ago

0.6.0-alpha.2

3 years ago

0.6.0-alpha.1

3 years ago

0.6.0-alpha.0

3 years ago

0.5.0-alpha.2

3 years ago

0.5.0-alpha.1

3 years ago

0.4.0-rc.13

3 years ago

0.4.0-rc.14

3 years ago

0.3.4

3 years ago

0.5.0-alpha.0

3 years ago

0.4.0-rc.11

3 years ago

0.4.0-rc.12

3 years ago

0.4.0-rc.9

3 years ago

0.4.0-rc.8

3 years ago

0.4.0-rc.7

3 years ago

0.3.2

3 years ago

0.3.3

3 years ago

0.3.2-alpha.10

3 years ago

0.4.0-rc.5

4 years ago

0.4.0-rc.3

4 years ago

0.4.0-rc.1

4 years ago

0.4.0-alpha.3

4 years ago

0.4.0-alpha.2

4 years ago

0.4.0-alpha.1

4 years ago

0.4.0-alpha.0

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.3.0-alpha.6

4 years ago

0.3.0-alpha.5

4 years ago

0.3.0-alpha.4

4 years ago

0.3.0-alpha.3

4 years ago

0.3.0-alpha.2

4 years ago

0.3.0-alpha.1

4 years ago

0.3.0-alpha.0

4 years ago

0.2.53

4 years ago

0.2.52

4 years ago

0.2.51

4 years ago

0.2.49

4 years ago

0.2.48

4 years ago

0.2.47

5 years ago

0.2.46

5 years ago

0.2.45

5 years ago

0.2.44

5 years ago

0.2.43

5 years ago

0.2.42

5 years ago

0.2.41

5 years ago

0.2.40

5 years ago

0.2.38

5 years ago

0.2.36

5 years ago

0.2.35

5 years ago

0.2.33

5 years ago

0.2.31

5 years ago

0.2.29

5 years ago

0.2.26

5 years ago

0.2.25

5 years ago

0.2.23

5 years ago

0.2.21

5 years ago

0.2.20

5 years ago

0.2.18

5 years ago

0.2.16

5 years ago

0.2.15

5 years ago

0.2.14

5 years ago

0.2.13

5 years ago

0.2.12

5 years ago