🖨

React Component から HTML コードを取得する

2022/02/05に公開

コード

React コンポーネントからレンダリングされる HTML コードを文字列として返す関数です。

import ReactDOM from 'react-dom'

export function getComponentHtmlCode(component: React.ReactElement) {
  const div = document.createElement('div')

  return new Promise<string>((resolve) => {
    ReactDOM.render(component, div, () => {
      resolve(div.innerHTML)
    })
  })
}

CodeSandbox

GitHubで編集を提案

Discussion