Docz: mdxのフック

作成日 2018年11月29日 · 3コメント · ソース: doczjs/docz

質問

ちょっと、そこ、

mdxファイル内でreactフックを使用する方法はありますか？
私はこのようなdoczでモーダルを文書化しようとしています：

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>

ソース

w0wka91

👍1

最も参考になるコメント

確かに、

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

pedronauck 2018年11月29日

👍13 🎉3 👎3

全てのコメント3件

確かに、

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

pedronauck 2018年11月29日

👍13 🎉3 👎3

注：内部に空白行を含めることはできません