How to use the theme-ui.jsx function in theme-ui
To help you get started, weβve selected a few theme-ui examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
blocks / blocks / packages / blocks-ui / src / pragma.js View on Github 
export default elementSelectionHandler => (type, props, ...children) => {
const element = useElement() || {}
props = props || {}
const { [uuidName]: id, sx = {} } = props
delete props[uuidName]
const isCurrentElement = id && id === element.id
if (IGNORED_TYPES.includes(type)) {
return jsx(type, props, ...children)
}
return jsx(
type,
{
...props,
sx: {
...sx,
boxShadow: isCurrentElement
? 'inset 0px 0px 0px 2px #0079FF'
: sx.boxShadow
},
onClick: e => {
e.stopPropagation()
if (id) {
elementSelectionHandler(id)module.exports = ({ element }, opts) => {
return jsx(
ThemeProvider,
{
...opts,
theme,
},
theme.initialColorMode &&
jsx(ColorMode, {
key: 'theme-ui-color-mode',
}),
element
)
}module.exports = ({ element }, opts) => {
return jsx(
ThemeProvider,
{
...opts,
theme,
},
theme.initialColorMode &&
jsx(ColorMode, {
key: 'theme-ui-color-mode',
}),
element
)
}export const wrapRootElement = ({ element }) =>
jsx(ThemeStateProvider, { theme },
jsx(ThemeProvider, {
components,
},
hasColorModes(theme) &&
jsx(ColorMode, {
key: 'theme-ui-color-mode',
}),
React.cloneElement(element, { key: 'element' })
)
)export default elementSelectionHandler => (type, props, ...children) => {
const element = useElement() || {}
props = props || {}
const { [uuidName]: id, sx = {} } = props
delete props[uuidName]
const isCurrentElement = id && id === element.id
if (IGNORED_TYPES.includes(type)) {
return jsx(type, props, ...children)
}
return jsx(
type,
{
...props,
sx: {
...sx,
boxShadow: isCurrentElement
? 'inset 0px 0px 0px 2px #0079FF'
: sx.boxShadow
},
onClick: e => {
e.stopPropagation()
if (id) {
elementSelectionHandler(id)
}
}
},export const onRenderBody = ({ setPreBodyComponents }) => {
const script = jsx('script', {
key: 'theme-ui-noscript',
dangerouslySetInnerHTML: {
__html: noflash,
},
})
setPreBodyComponents([script])
}export const wrapRootElement = ({ element }) =>
jsx(ThemeStateProvider, { theme },
jsx(ThemeProvider, {
components,
},
hasColorModes(theme) &&
jsx(ColorMode, {
key: 'theme-ui-color-mode',
}),
React.cloneElement(element, { key: 'element' })
)
)export const wrapRootElement = ({ element }) =>
jsx(ThemeStateProvider, { theme },
jsx(ThemeProvider, {
components,
},
hasColorModes(theme) &&
jsx(ColorMode, {
key: 'theme-ui-color-mode',
}),
React.cloneElement(element, { key: 'element' })
)
)exports.onRenderBody = ({ setPreBodyComponents }) => {
const script = jsx('script', {
dangerouslySetInnerHTML: {
__html: noflash,
},
})
setPreBodyComponents([script])
}
