安装

npm

npm install @jizirui/auto-fix-react

pnpm

pnpm add @jizirui/auto-fix-react

yarn

yarn add @jizirui/auto-fix-react

引入方式

ESM

import { FullScreenContainer } from '@jizirui/auto-fix-react'

CommonJS

const { useAutoFix, FullScreenContainer } = require('@jizirui/auto-fix-react/dist/cjs')

UMD

    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="./node_modules/@jizirui/auto-fix-react/dist/umd/index.js"></script>

    <script type="text/babel">
      function PackageName() {
        const { useState } = window.React
        const { useAutoFix, FullScreenContainer } = window.autoFix
        const [name, setName] = useState('auto-fix')
        return (
          <FullScreenContainer width={1920} height={1080}>
            <h1>{name}</h1>
          </FullScreenContainer>
        )
      }
      ReactDOM.render(<PackageName />, document.getElementById('app'))
    </script>

HTML 部分

<!-- 组件形式 -->
<full-screen-container width={1920} height={1080}>
  <div>柱状图</div>
  <div>饼图</div>
  ...
</full-screen-container>

或

<!-- Hook -->
<div
  style={{
    width: `${canvasWidth}px`,
    height: `${canvasHeight}px`,
    ...canvasStyle
  }}
>
  <div>柱状图</div>
  <div>饼图</div>
  ...
</div>