How to use @blocks/react - 2 common examples

To help you get started, we’ve selected a few @blocks/react 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.

github blocks / blocks / packages / blocks-ui / src / editor.js View on Github external
onChange,
  layout = 'div'
}) => {
  const [code, setCode] = useState(null)
  const [rawCode, setRawCode] = useState(null)
  const [transformedCode, setTransformedCode] = useState(null)
  const [elementId, setElementId] = useState(null)
  const [elementData, setElementData] = useState(null)
  const [activeTab, setActiveTab] = useState(0)
  const [srcBlocks, setSrcBlocks] = useState([])
  const [theme, setTheme] = useState(defaultTheme)

  const blocks = providedBlocks ? providedBlocks : DEFAULT_BLOCKS

  const scope = {
    Blocks: DEFAULT_BLOCKS.Blocks,
    Styled,
    Link: Styled.a,
    jsx: pragma(setElementId),
    BLOCKS_Droppable: props => ,
    BLOCKS_Draggable: props => (
      
    ),
    BLOCKS_DraggableInner: props =&gt; <div>,
    BLOCKS_DroppableInner: props =&gt; <div>,
    BLOCKS_Text: props =&gt; <span>,
    ...themeComponents,
    ...blocks,
    BLOCKS_Layout: layout
  }

  useEffect(() =&gt; {</span></div></div>
github blocks / blocks / packages / blocks-ui / src / index.js View on Github external
onChange,
  layout = 'div'
}) =&gt; {
  const [code, setCode] = useState(null)
  const [rawCode, setRawCode] = useState(null)
  const [transformedCode, setTransformedCode] = useState(null)
  const [elementId, setElementId] = useState(null)
  const [elementData, setElementData] = useState(null)
  const [activeTab, setActiveTab] = useState(0)
  const [srcBlocks, setSrcBlocks] = useState([])
  const [theme, setTheme] = useState(defaultTheme)

  const blocks = providedBlocks ? providedBlocks : DEFAULT_BLOCKS

  const scope = {
    Blocks: DEFAULT_BLOCKS.Blocks,
    Styled,
    Link: Styled.a,
    jsx: pragma(setElementId),
    BLOCKS_Droppable: props =&gt; ,
    BLOCKS_Draggable: props =&gt; (
      
    ),
    BLOCKS_DraggableInner: props =&gt; <div>,
    BLOCKS_DroppableInner: props =&gt; <div>,
    BLOCKS_Text: props =&gt; <span>,
    ...themeComponents,
    ...blocks,
    BLOCKS_Layout: layout
  }

  useEffect(() =&gt; {</span></div></div>

@blocks/react

The default, Theme UI-based for the Blocks editor

MIT
Latest version published 4 years ago

Package Health Score

60 / 100
Full package analysis

Popular @blocks/react functions

Similar packages