React+TypeScript极简开发Popup组件并发布到npm

2023-12-20 14:28:41

在上篇文章中，我们介绍了如何从头开始搭建一个React组件库框架，但为了几个组件而搭建一个组件库未免有些小题大做。

本期将以移动端常用的Popup组件为例，演示如何以最简单快捷的方式发布一个功能完备的npm包。如果您觉得本文对您有所帮助，欢迎点赞、Star，或提出宝贵建议。

流程简述：

初始化项目
搭建Popup组件
编写TypeScript类型定义
打包组件
发布到npm

1. 初始化项目

npx create-react-library my-popup

2. 搭建Popup组件

创建 src/Popup.tsx 文件，并添加以下代码：

import * as React from 'react';
import { motion } from 'framer-motion';

export const Popup = ({ children, visible }) => {
  return (
    <>
      {visible && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
        >
          {children}
        </motion.div>
      )}
    </>
  );
};

3. 编写TypeScript类型定义

创建 src/index.d.ts 文件，并添加以下代码：

export interface PopupProps {
  children: React.ReactNode;
  visible?: boolean;
}

declare const Popup: React.FC<PopupProps>;

export default Popup;

4. 打包组件

运行以下命令：

npm run build

5. 发布到npm

npm publish

至此，您已成功将React + TypeScript Popup组件发布到npm。您可以通过以下方式使用该组件：

import Popup from 'my-popup';

const App = () => {
  const [visible, setVisible] = React.useState(false);

  return (
    <>
      <button onClick={() => setVisible(true)}>Open Popup</button>
      <Popup visible={visible}>
        Hello World!
      </Popup>
    </>
  );
};