@aligov/use-drawer-hook

intro component

Usage no npm install needed!

<script type="module">
  import aligovUseDrawerHook from 'https://cdn.skypack.dev/@aligov/use-drawer-hook';
</script>

README

demo component

@aligov/use-drawer-hook

intro component

API

drawerInfo setDrawerInfo onAddClose

用法

和@aligov/common-form-drawer 一起使用

import React, { Component } from "react";
import ReactDOM from "react-dom";
import UseDrawerHook from "@aligov/use-drawer-hook";
import CommonFormDrawer from "@aligov/common-form-drawer";
import { Button } from "@alifd/next";

const Home = () => {
  const { drawerInfo, onAddClose, setDrawerInfo } = useDrawerHook();
  return (
    <div>
      <Button
        onClick={() => {
          setDrawerInfo({
            visible: true,
            value: {},
          });
        }}
      >
        展开drawer
      </Button>
      <CommonFormDrawer
        visible={drawerInfo.visible}
        components={{ Input }}
        dialogValue={drawerInfo.value}
        onOk={console.log}
        onClose={onAddClose}
        mode={drawerInfo.mode}
      >
        <Field
          name="name"
          title="Field用法"
          type="string"
          required={true}
          x-component="Input"
        />
      </CommonFormDrawer>
    </div>
  );
};

ReactDOM.render(<Home />, mountNode);