Docz: Hooks in mdx

Created on 29 Nov 2018 · 3Comments · Source: doczjs/docz

Question

Hey there,

is there a way to use react hooks within the mdx file?
I'm trying to document a modal with docz like this:

name: Modal
---

import { Playground } from 'docz'
import Modal from './Modal'
import useToggle from '../../hooks/useToggle'

# Modal

<Playground>
  const [toggleValue, toggle] = useToggle(false)
  <Modal title="Modal title" visible={toggleValue} />
  <button onClick={toggle}>Show Modal</button>
</Playground>

Source

w0wka91

👍1

Most helpful comment

For sure,

<Playground>
  {() => {
    const [toggleValue, toggle] = useToggle(false)
    return (
      <>
        <Modal title="Modal title" visible={toggleValue} />
        <button onClick={toggle}>Show Modal</button>
      </>
    )
  }}
</Playground>

pedronauck on 29 Nov 2018

👍13 🎉3 👎3

All 3 comments

For sure,

<Playground>
  {() => {
    const [toggleValue, toggle] = useToggle(false)
    return (
      <>
        <Modal title="Modal title" visible={toggleValue} />
        <button onClick={toggle}>Show Modal</button>
      </>
    )
  }}
</Playground>

pedronauck on 29 Nov 2018

👍13 🎉3 👎3

NOTE: You can't have blank lines inside