Đây là một thư viện đóng gói mã nguồn của mình nhanh chóng, giúp cho việc tạo npm package thật đơn giản và dễ hiểu, việc còn lại của bạn chỉ là làm thế nào để code của mình chạy cho đúng. Ta bắt đầu nhé. Trước tiên cài đặt create-react-library:

npm install -g create-react-library
or
npx create-react-library

Sau khi làm theo các hướng dẫn ta sẽ được thư mục như thế này.

Thư mục example là thư mục để bạn run chạy test package của mình, để start.

cd example

yarn start

Chúng ta đã làm quen với Component của React thì đều biết rằng để sử dụng lại các component thì mình phải truyền Input và xác định xem sẽ xử lý thế nào để đưa ra Output đúng như mình mong muốn, cho nhiều trường hợp cụ thể.

Vậy package hoạt động cũng như vậy, cùng tìm hiểu file "/src/index.js"

import React from 'react'
import styles from './styles.module.css'

export const ExampleComponent = ({ text }) => {
  return <div className={styles.test}>Example Component: {text}</div>
}

ở đây, ExampleComponent sẽ nhận props truyền vào là {text} (ví dụ text = "ClassFunc") và return ra ngoài màn hình textField : "Example Component: ClassFunc". thật đơn giản và dễ hiểu phải không? Đây là file index mình đã thực hiện:

import React from "react";
import { Button } from "antd";
import styles from "./styles.module.css";

export const CLFButtonSVG = ({
                               iconComponent,
                               name,
                               onClick,
                               size,
                               disable,
                               loading,
                               width,
                               height,
                               key,
                               margin,
                               padding,
                               block,
                               className,
                               minWidth,
                               minHeight,
                               background = "#1790FF",
                               borderColor = "#1790FF",
                               iconRevert = false
                             }) => {
  return (
    <Button
      className={`${styles.primary} ${iconRevert ? styles.flexRevert : styles.flex} ${className}`}
      icon={iconComponent ?
        {
          ...iconComponent,
          props: {
            ...iconComponent.props,
            className: iconRevert ? styles.iconBtnRevert : styles.iconBtn
          }
        } :
        null}
      size={size}
      onClick={onClick}
      disabled={disable}
      loading={loading}
      style={{
        width,
        height,
        margin,
        padding,
        minWidth,
        minHeight,
        background,
        borderColor
      }}
      key={key}
      block={block}
    >
      <div className={iconRevert ? styles.buttonNameRevert : styles.buttonName}>
        {name}
      </div>
    </Button>
  );
};

Mình sử dụng styles modules css để đóng gói,

@import '~antd/dist/antd.css';
/* add css module styles here (optional) */

.flex {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.flexRevert {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: row-reverse !important;
}

.grid {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important
}

.primary {
  margin: 5px;
  min-width: 125px;
  min-height: 35px;
  font-weight: 700 !important;
  color: #FFF !important;
  font-size: 1.2rem;
  border-radius: 25px !important;
  position: relative !important;
}

.primary:hover {
  opacity: 0.8 !important;
  border-color: initial !important;
  color: #FFF !important
}

.primary:focus {
  opacity: 0.8 !important;
  border-color: initial !important;
  color: #FFF !important
}

.primary .iconBtn {
  max-width: 31px !important;
  position: absolute !important;
  left: 1px !important;
  margin-right: 10px !important;
}

.primary .iconBtnRevert {
  max-width: 31px !important;
  position: absolute !important;
  right: 1px !important;
  margin-left: 10px !important;
}

.primary .ant-btn-loading-icon {
  position: absolute !important;
  top: 50% !important;
  margin-top: -0.5em !important;
}

.primary .iconBtn span {
  margin-left: 20px !important;
}

.primary .buttonName {
  margin-left: 20px !important;
}

.primary .buttonNameRevert {
  margin-right: 20px !important;
}

Sau khi thực hiện và kiểm tra các chức năng xong, có để publish ngay lên NPM bằng tài khoản của mình.

npm login

npm publish

À đừng quên chỉnh sửa file Readme.md để hướng dẫn người dùng sử dụng package của bạn nhé :D. Đây là thành quả của mình.

Demo link: https://duongdam.github.io/react-antd-button-svg-icons/ Package link: https://www.npmjs.com/package/react-antd-button-svg-icons Resource: https://github.com/duongdam/react-antd-button-svg-icons

Tài liệu tham khảo:

1. https://www.npmjs.com/package/create-react-library
2. https://www.npmjs.com/