现在的项目开发，基本上都有依赖npm库，而这些库当然也是开发者发布的，这个是对所有人都开放的，所以我们今天也来发布一个，名称叫react-hooks-extra。

因为我之前一直开发react，而react基本上也来到了Hooks开发阶段。所以我发布一个Hooks的库。我们来看看如何实现。

一般来说，针对框架开发组件，会用webpack、Babel、rollup等工具进行打包之后上传到npm上面去，很多时候都是开发者从0去配置，成本较大，相对难一点，如果你不想那样，可以可以试试下面这种。

对于react，现在社区有很多开箱即用的零配置脚手架。所以最简单的就是用这些脚手架工具开发即可。

对于react，有下面几个比较好用。我用的是create-react-hook

1、create-react-library 有中文文档

2、create-react-hook（Hook + TypeScript）

3、nwb

4、tsdx

Part1create-react-hook开发hooks组件

// 1
npm install -g create-react-hook

// 2、终端直接执行
create-react-hook

// 3、
cd react-hooks-extra

你应该得到下面目录

src/index.tsx开发

下面这个是我的代码，我要的效果是事件状态处理。也就是平时的loading。功能包括是否loading，loading文字。

export const useLoadHook = () => {
  let [{ loading, txt = "loading" }, setLoading] = React.useState<{
    loading: boolean;
    txt?: string;
  }>({
    loading: false,
    txt: "loading",
  });
  return { loading, txt, setLoading };
};

在src/example测试

记得先yarn build。

如果测试没问题。就直接发布即可。

Part2发布

1npm login

如果没有注册，记得去npmjs.com注册。

2npm publish

注意事项：1、在这之前，先确定，npm源是npm官方源，不是淘宝源。2、每次发布记得更新版本号。

最后登录npmjs.com网站看到有了。

Part3使用

yarn add react-hooks-extra -D

import { useLoadHook } from 'react-hooks-extra'
export default function Use() {
  const { loading, txt, setLoading} = useLoadHook();
  const add = () =>{
    setLoading({
      loading:true,
      txt: '处理中'
    })
  }
  return (
    <>
      <button onClick={() => add()}>click</button>
    </>
  );
}

对于初学者，不建议使用这种脚手架，因为这样学不到什么东西，建议使用上面提到的工具从0实现，这样你会收获很多，这样才能让技术得到提升。

完结撒花！！！！！