diff --git a/README.md b/README.md
index 302c73f..7741267 100644
--- a/README.md
+++ b/README.md
@@ -17,35 +17,55 @@ __GENERATE_DOCS__
 ## usage
 1. import css
   ```scss
-  @import "~@jswork/react-ellipsis-middle/dist/style.css";
+  @import "~@jswork/boilerplate-react-component/dist/style.css";
 
   // or use sass
-  @import "~@jswork/react-ellipsis-middle/dist/style.scss";
+  @import "~@jswork/boilerplate-react-component/dist/style.scss";
 
   // customize your styles:
-  $react-ellipsis-middle-options: ()
+  $boilerplate-react-component-options: ()
   ```
 2. import js
   ```js
   import React from 'react';
-  import ReactEllipsisMiddle from '@jswork/react-ellipsis-middle';
+  import ReactEllipsisMiddle from '@jswork/boilerplate-react-component';
   import styled from 'styled-components';
   import '../../src/components/style.scss';
 
   const Container = styled.div`
-    width: 80%;
-    margin: 30px auto 0;
+    width: 600px;
+    margin: 50px auto;
+    border-radius: 8px;
+    padding: 15px;
+    overflow: hidden;
+    resize: horizontal;
+    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
+
+    .react-ellipsis-middle {
+      cursor: pointer;
+      &:hover {
+        transition: all 0.5s ease;
+        background-color: #f60;
+      }
+    }
   `;
 
   export default (props: any) => {
     return (
       <Container>
         <ReactEllipsisMiddle size="120px">
-          CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26
+          CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧
+          - 2021-03-26
         </ReactEllipsisMiddle>
 
         <ReactEllipsisMiddle size="50%">
-          CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26
+          CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧
+          - 2021-03-26
+        </ReactEllipsisMiddle>
+
+        <ReactEllipsisMiddle>CSS 实现优惠券的技巧 - 2021-03-26</ReactEllipsisMiddle>
+        <ReactEllipsisMiddle minSize="40px">
+          我是一个很长的文件，我是一个很长的文件，但请始终保持我的后缀名.pdf
         </ReactEllipsisMiddle>
       </Container>
     );
diff --git a/build/markdown.js b/build/markdown.js
index e974483..1b2d425 100644
--- a/build/markdown.js
+++ b/build/markdown.js
@@ -1,8 +1,7 @@
-const fs = require('fs');
-const indentString = require('indent-string');
+import fs from 'fs';
+import indentString from 'indent-string';
 
-require('@jswork/next');
-require('@jswork/next-replace-in-file');
+import '@jswork/next-replace-in-file';
 
 nx.declare({
   statics: {
@@ -21,7 +20,7 @@ nx.declare({
 
       nx.replaceInFile('README.md', [
         // ['__GENERATE_DOCS__', rmp('./src/components/index.tsx')],
-        ['__GENERATE_DAPP__', indentString(docApp, ' ', 2)],
+        ['__GENERATE_DAPP__', indentString(docApp, 2)],
         ['../../src/main', '@jswork/boilerplate-react-component']
       ]);
     }
diff --git a/docs/assets/index.57b24b72.js b/docs/assets/index.57b24b72.js
deleted file mode 100644
index f3aa3d3..0000000
--- a/docs/assets/index.57b24b72.js
+++ /dev/null
@@ -1,4 +0,0 @@
-var e=Object.defineProperty,t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,n=(t,r,l)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):t[r]=l;import{r as s,_ as i,R as o,c as a,s as c,a as d}from"./vendor.4a90092b.js";!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))t(e);new MutationObserver((e=>{for(const r of e)if("childList"===r.type)for(const e of r.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&t(e)})).observe(document,{childList:!0,subtree:!0})}function t(e){if(e.ep)return;e.ep=!0;const t=function(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?t.credentials="include":"anonymous"===e.crossorigin?t.credentials="omit":t.credentials="same-origin",t}(e);fetch(e.href,t)}}();const m="react-ellipsis-middle";class p extends s.exports.Component{get sizeStyle(){return{width:this.props.size}}render(){const e=this.props,{className:s,children:c,size:d}=e,p=((e,n)=>{var s={};for(var i in e)r.call(e,i)&&n.indexOf(i)<0&&(s[i]=e[i]);if(null!=e&&t)for(var i of t(e))n.indexOf(i)<0&&l.call(e,i)&&(s[i]=e[i]);return s})(e,["className","children","size"]),u=i(p);return o.createElement("div",((e,s)=>{for(var i in s||(s={}))r.call(s,i)&&n(e,i,s[i]);if(t)for(var i of t(s))l.call(s,i)&&n(e,i,s[i]);return e})({"data-component":m,className:a(m,s)},u),o.createElement("div",{className:"is-fulltext"},c),o.createElement("div",{className:"is-halftext"},o.createElement("div",{className:"is-overlap",style:this.sizeStyle},c),c))}}p.displayName=m,p.version="__VERSION__",p.defaultProps={size:"50%"};const u=c.div`
-  width: 80%;
-  margin: 30px auto 0;
-`;var f=e=>o.createElement(u,null,o.createElement(p,{size:"120px"},"CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26"),o.createElement(p,{size:"50%"},"CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26"));d.render(o.createElement(o.StrictMode,null,o.createElement(f,null)),document.getElementById("root"));
diff --git a/docs/assets/index.84fed453.js b/docs/assets/index.84fed453.js
new file mode 100644
index 0000000..dac15bc
--- /dev/null
+++ b/docs/assets/index.84fed453.js
@@ -0,0 +1,17 @@
+var e=Object.defineProperty,r=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,n=(r,t,i)=>t in r?e(r,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[t]=i;"undefined"!=typeof require&&require;import{r as o,_ as l,R as s,c as a,s as c,a as d}from"./vendor.76891dd0.js";!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver((e=>{for(const t of e)if("childList"===t.type)for(const e of t.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&r(e)})).observe(document,{childList:!0,subtree:!0})}function r(e){if(e.ep)return;e.ep=!0;const r=function(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerpolicy&&(r.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?r.credentials="include":"anonymous"===e.crossorigin?r.credentials="omit":r.credentials="same-origin",r}(e);fetch(e.href,r)}}();const p="react-ellipsis-middle";class m extends o.exports.Component{get sizeStyle(){const{size:e,minSize:r}=this.props;return{width:e,minWidth:r}}render(){const e=this.props,{className:o,children:c,size:d}=e,m=((e,n)=>{var o={};for(var l in e)t.call(e,l)&&n.indexOf(l)<0&&(o[l]=e[l]);if(null!=e&&r)for(var l of r(e))n.indexOf(l)<0&&i.call(e,l)&&(o[l]=e[l]);return o})(e,["className","children","size"]),f=l(m);return s.createElement("div",((e,o)=>{for(var l in o||(o={}))t.call(o,l)&&n(e,l,o[l]);if(r)for(var l of r(o))i.call(o,l)&&n(e,l,o[l]);return e})({"data-component":p,className:a(p,o)},f),s.createElement("div",{className:"is-fulltext"},c),s.createElement("div",{className:"is-halftext"},s.createElement("div",{className:"is-overlap",style:this.sizeStyle},c),c))}}m.displayName=p,m.version="__VERSION__",m.defaultProps={size:"50%",minSize:0};const f=c.div`
+  width: 600px;
+  margin: 50px auto;
+  border-radius: 8px;
+  padding: 15px;
+  overflow: hidden;
+  resize: horizontal;
+  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
+
+  .react-ellipsis-middle {
+    cursor: pointer;
+    &:hover {
+      transition: all 0.5s ease;
+      background-color: #f60;
+    }
+  }
+`;var u=e=>s.createElement(f,null,s.createElement(m,{size:"120px"},"CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26"),s.createElement(m,{size:"50%"},"CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26"),s.createElement(m,null,"CSS 实现优惠券的技巧 - 2021-03-26"),s.createElement(m,{minSize:"40px"},"我是一个很长的文件，我是一个很长的文件，但请始终保持我的后缀名.pdf"));d.render(s.createElement(s.StrictMode,null,s.createElement(u,null)),document.getElementById("root"));
diff --git a/docs/assets/vendor.4a90092b.js b/docs/assets/vendor.76891dd0.js
similarity index 100%
rename from docs/assets/vendor.4a90092b.js
rename to docs/assets/vendor.76891dd0.js
diff --git a/docs/index.html b/docs/index.html
index 5f00879..d9cbb70 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
-    <script type="module" crossorigin src="assets/index.57b24b72.js"></script>
-    <link rel="modulepreload" href="assets/vendor.4a90092b.js">
+    <script type="module" crossorigin src="assets/index.84fed453.js"></script>
+    <link rel="modulepreload" href="assets/vendor.76891dd0.js">
     <link rel="stylesheet" href="assets/index.c9b5aeb1.css">
   </head>
   <body>
diff --git a/package.json b/package.json
index c8846ef..2af6661 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/main.d.ts",
+  "type": "module",
   "files": [
     "dist"
   ],
@@ -40,6 +41,7 @@
     "babel-loader": "^8.2.2",
     "core-js": "^3.8.2",
     "css-loader": "^5.0.1",
+    "indent-string": "^5.0.0",
     "jest": "^26.6.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",