0.14.7 • Published 3 years ago

@theme-ui/editor v0.14.7

Weekly downloads
99
License
MIT
Repository
github
Last release
3 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

3 years ago

0.14.7

3 years ago

0.15.0-develop.8

3 years ago

0.15.0-develop.9

3 years ago

0.15.0-develop.6

3 years ago

0.15.0-develop.7

3 years ago

0.15.0-develop.5

3 years ago

0.14.4-develop.1

3 years ago

0.14.4-develop.0

3 years ago

0.14.5-develop.0

3 years ago

0.14.5

3 years ago

0.14.3

3 years ago

0.14.4

3 years ago

0.15.0-develop.4

3 years ago

0.15.0-develop.2

3 years ago

0.15.0-develop.3

3 years ago

0.15.0-develop.0

3 years ago

0.15.0-develop.1

3 years ago

0.14.3-develop.1

3 years ago

0.14.3-develop.0

3 years ago

0.14.2-develop.2

3 years ago

0.14.2

3 years ago

0.14.1-develop.0

3 years ago

0.14.2-develop.1

3 years ago

0.14.2-develop.0

3 years ago

0.14.0

3 years ago

0.14.1

3 years ago

0.13.1-develop.9

3 years ago

0.13.1-develop.8

3 years ago

0.13.1-develop.7

3 years ago

0.13.1-develop.6

3 years ago

0.13.1-develop.5

3 years ago

0.13.1-develop.4

3 years ago

0.13.1-develop.3

3 years ago

0.13.1-develop.2

3 years ago

0.13.1-develop.1

3 years ago

0.13.1

3 years ago

0.14.0-develop.0

3 years ago

0.14.0-develop.2

3 years ago

0.14.0-develop.1

3 years ago

0.14.0-develop.4

3 years ago

0.14.0-develop.3

3 years ago

0.14.0-develop.6

3 years ago

0.14.0-develop.5

3 years ago

0.14.0-develop.8

3 years ago

0.14.0-develop.7

3 years ago

0.14.0-develop.9

3 years ago

0.13.1-develop.0

3 years ago

0.13.0

3 years ago

0.12.2-develop.7

4 years ago

0.12.2-develop.8

4 years ago

0.12.2-develop.5

4 years ago

0.12.2-develop.6

4 years ago

0.12.2-develop.3

4 years ago

0.12.2-develop.4

4 years ago

0.12.2-develop.1

4 years ago

0.12.2-develop.2

4 years ago

0.12.2-develop.0

4 years ago

0.12.1

4 years ago

0.13.0-develop.0

4 years ago

0.13.0-develop.1

4 years ago

0.12.1-develop.2

4 years ago

0.12.1-develop.3

4 years ago

0.12.1-develop.0

4 years ago

0.12.1-develop.1

4 years ago

0.12.1-develop.6

4 years ago

0.12.1-develop.4

4 years ago

0.12.1-develop.5

4 years ago

0.12.0

4 years ago

0.12.0-develop.0

4 years ago

0.11.4-develop.1

4 years ago

0.11.4-develop.0

4 years ago

0.11.4-develop.9

4 years ago

0.11.4-develop.8

4 years ago

0.11.4-develop.7

4 years ago

0.11.4-develop.6

4 years ago

0.11.4-develop.5

4 years ago

0.11.4-develop.4

4 years ago

0.11.4-develop.3

4 years ago

0.11.4-develop.2

4 years ago

0.11.3

4 years ago

0.11.3-develop.5

4 years ago

0.11.3-develop.3

4 years ago

0.11.3-develop.4

4 years ago

0.11.3-develop.0

4 years ago

0.11.3-develop.1

4 years ago

0.11.3-develop.2

4 years ago

0.11.2

4 years ago

0.11.2-develop.3

4 years ago

0.11.2-develop.4

4 years ago

0.11.2-develop.1

4 years ago

0.11.2-develop.0

4 years ago

0.11.2-develop.2

4 years ago

0.11.0

4 years ago

0.11.1

4 years ago

0.11.0-develop.1

4 years ago

0.11.0-develop.2

4 years ago

0.11.0-develop.0

4 years ago

0.10.0

4 years ago

0.9.2-develop.6

4 years ago

0.10.1-develop.0

4 years ago

0.9.2-develop.4

4 years ago

0.9.2-develop.5

4 years ago

0.9.2-develop.0

4 years ago

0.9.2-develop.1

4 years ago

0.9.0

4 years ago

0.9.1

4 years ago

0.9.1-develop.0

4 years ago

0.9.0-develop.1

4 years ago

0.8.4

4 years ago

0.8.3-develop.0

4 years ago

0.7.3-develop.0

4 years ago

0.7.4

4 years ago

0.7.3

4 years ago

0.8.4-develop.0

4 years ago

0.7.4-develop.0

4 years ago

0.7.4-develop.2

4 years ago

0.7.4-develop.1

4 years ago

0.8.1

4 years ago

0.8.0

4 years ago

0.8.3

4 years ago

0.8.2

4 years ago

0.8.5-develop.0

4 years ago

0.7.5-develop.0

4 years ago

0.8.2-develop.0

4 years ago

0.8.2-develop.1

4 years ago

0.8.2-develop.2

4 years ago

0.7.5

4 years ago

0.9.0-develop.0

4 years ago

0.8.0-develop.0

4 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.7.1-develop.0

4 years ago

0.7.0

4 years ago

0.7.0-develop.0

4 years ago

0.6.2

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.6.0-alpha.8

4 years ago

0.6.0-alpha.7

4 years ago

0.6.0-alpha.6

4 years ago

0.6.0-alpha.5

4 years ago

0.3.5

4 years ago

0.6.0-alpha.4

4 years ago

0.6.0-alpha.3

5 years ago

0.6.0-alpha.2

5 years ago

0.6.0-alpha.1

5 years ago

0.6.0-alpha.0

5 years ago

0.5.0-alpha.2

5 years ago

0.5.0-alpha.1

5 years ago

0.4.0-rc.13

5 years ago

0.4.0-rc.14

5 years ago

0.3.4

5 years ago

0.5.0-alpha.0

5 years ago

0.4.0-rc.11

5 years ago

0.4.0-rc.12

5 years ago

0.4.0-rc.9

5 years ago

0.4.0-rc.8

5 years ago

0.4.0-rc.7

5 years ago

0.3.2

5 years ago

0.3.3

5 years ago

0.3.2-alpha.10

5 years ago

0.4.0-rc.5

5 years ago

0.4.0-rc.3

5 years ago

0.4.0-rc.1

5 years ago

0.4.0-alpha.3

5 years ago

0.4.0-alpha.2

5 years ago

0.4.0-alpha.1

5 years ago

0.4.0-alpha.0

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.3.0-alpha.6

5 years ago

0.3.0-alpha.5

5 years ago

0.3.0-alpha.4

5 years ago

0.3.0-alpha.3

5 years ago

0.3.0-alpha.2

5 years ago

0.3.0-alpha.1

5 years ago

0.3.0-alpha.0

5 years ago

0.2.53

5 years ago

0.2.52

6 years ago

0.2.51

6 years ago

0.2.49

6 years ago

0.2.48

6 years ago

0.2.47

6 years ago

0.2.46

6 years ago

0.2.45

6 years ago

0.2.44

6 years ago

0.2.43

6 years ago

0.2.42

6 years ago

0.2.41

6 years ago

0.2.40

6 years ago

0.2.38

6 years ago

0.2.36

6 years ago

0.2.35

6 years ago

0.2.33

6 years ago

0.2.31

6 years ago

0.2.29

6 years ago

0.2.26

6 years ago

0.2.25

6 years ago

0.2.23

6 years ago

0.2.21

6 years ago

0.2.20

6 years ago

0.2.18

6 years ago

0.2.16

6 years ago

0.2.15

6 years ago

0.2.14

6 years ago

0.2.13

6 years ago

0.2.12

6 years ago