done

.npmignore

@@ -5,16 +5,16 @@
 /node_modules
 /pages
 /public
-/@axframe-datagrid
+/react-multi-email
 /styles
 /test
 /tsconfigs
-.eslintrc.json
+.eslintignore
+.eslintrc.js
 .gitignore
 .npmignore
 .prettierignore
 .prettierrc
-jest.config.js
 next.config.js
 next-env.d.ts
 package-lock.json

README.md

@@ -0,0 +1,74 @@
+[![npm version](https://badge.fury.io/js/react-multi-email.svg)](https://badge.fury.io/js/react-multi-email)
+[![](https://img.shields.io/npm/dm/react-multi-email.svg)](https://www.npmjs.com/package/react-multi-email)
+
+# react-multi-email
+
+A simple react component to format multiple email as the user types.
+
+- Simple code
+- No dependency
+- Small size
+- Simple customization
+
+[See Demo](https://codesandbox.io/s/jpvjk8m5o9)
+
+<img src="https://cdn.rawgit.com/axui/react-multi-email/c3098f94/react-multi-email.gif" />
+
+## Installation
+
+```shell-script
+npm install react-multi-email
+```
+
+## Usage
+
+```typescript jsx
+import * as React from 'react';
+import { ReactMultiEmail, isEmail } from 'react-multi-email';
+import 'react-multi-email/style.css';
+
+interface Props {}
+
+function BasicExample(props: Props) {
+  const [emails, setEmails] = React.useState<string[]>([]);
+  const [focused, setFocused] = React.useState(false);
+
+  return (
+    <form>
+      <h3>Email</h3>
+      <ReactMultiEmail
+        placeholder='Input your email'
+        emails={emails}
+        onChange={(_emails: string[]) => {
+          setEmails(_emails);
+        }}
+        autoFocus={true}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        getLabel={(email, index, removeEmail) => {
+          return (
+            <div data-tag key={index}>
+              <div data-tag-item>{email}</div>
+              <span data-tag-handle onClick={() => removeEmail(index)}>
+                ×
+              </span>
+            </div>
+          );
+        }}
+      />
+      <br />
+      <h4>react-multi-email value</h4>
+      <h3>Focused: {focused ? 'true' : 'false'}</h3>
+      <p>{emails.join(', ') || 'empty'}</p>
+    </form>
+  );
+}
+
+export default BasicExample;
+```
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)
+
+> If you don't mind, don't forget to press "star" before leaving.

components/BodyRoot.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
 
 const BodyRoot = styled.div`

components/Nav.tsx

@@ -7,7 +7,7 @@ import { GithubFilled } from '@ant-design/icons';
 
 interface Props {}
 
-function Nav(props: Props) {
+function Nav(_props: Props) {
   const router = useRouter();
 
   return (

examples/BasicExample.tsx

@@ -5,19 +5,11 @@ import { ReactMultiEmail } from '../react-multi-email';
 interface Props {}
 
 function BasicExample(props: Props) {
-  const [width, setWidth] = React.useState(600);
   const [emails, setEmails] = React.useState<string[]>([]);
   const [focused, setFocused] = React.useState(false);
-  const containerRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    if (containerRef.current) {
-      setWidth(containerRef.current.clientWidth);
-    }
-  }, []);
 
   return (
-    <Container ref={containerRef}>
+    <Container>
       <form>
         <h3>Email</h3>
         <ReactMultiEmail

examples/CustomizeStyleExample.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { ReactMultiEmail } from '../react-multi-email';
+
+interface Props {}
+
+function CustomizeStyleExample(props: Props) {
+  const [emails, setEmails] = React.useState<string[]>([]);
+
+  return (
+    <Container>
+      <form>
+        <h3>Email</h3>
+        <ReactMultiEmail
+          placeholder={
+            <>
+              <b>I</b> am <u style={{ color: '#1890ff' }}>placeholder</u> !
+            </>
+          }
+          style={{ minHeight: '100px' }}
+          emails={emails}
+          onChange={(_emails: string[]) => {
+            setEmails(_emails);
+          }}
+          getLabel={(email, index, removeEmail) => {
+            return (
+              <div data-tag key={index}>
+                <div data-tag-item>{email}</div>
+                <span data-tag-handle onClick={() => removeEmail(index)}>
+                  ×
+                </span>
+              </div>
+            );
+          }}
+        />
+        <br />
+        <h4>react-multi-email value</h4>
+        <p>{emails.join(', ') || 'empty'}</p>
+      </form>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  font-size: 13px;
+`;
+
+export default CustomizeStyleExample;

pages/_app.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import '../styles/globals.css';
 import '../react-multi-email/style.css';
 import 'antd/dist/antd.css';

pages/_document.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Html, Head, Main, NextScript } from 'next/document';
 
 export default function Document() {

pages/customizeStyle.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { NextPage } from 'next';
+import { Container } from '../components/Layouts';
+import styled from '@emotion/styled';
+import BodyRoot from '../components/BodyRoot';
+import CustomizeStyleExample from '../examples/CustomizeStyleExample';
+
+const Custom: NextPage = () => {
+  return (
+    <PageContainer>
+      <Container>
+        <div>
+          <h2>CustomizeStyle</h2>
+          <CustomizeStyleExample />
+        </div>
+      </Container>
+    </PageContainer>
+  );
+};
+
+const PageContainer = styled(BodyRoot)``;
+
+export default Custom;

pages/index.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { NextPage } from 'next';
 import { Container } from '../components/Layouts';
 import styled from '@emotion/styled';

react-multi-email/style.css

@@ -15,7 +15,6 @@
   border-radius: 0.28571429rem;
   -webkit-transition: box-shadow 0.1s ease, border-color 0.1s ease;
   transition: box-shadow 0.1s ease, border-color 0.1s ease;
-  font-size: 13px;
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -44,7 +43,6 @@
 }
 
 .react-multi-email > input {
-  width: 100% !important;
   flex: 1;
   width: auto !important;
   outline: none !important;
@@ -61,7 +59,7 @@
   margin: 0.14285714em;
   background-color: #f3f3f3;
   background-image: none;
-  padding: 0.5833em 0.833em;
+  padding: 0.4em 0.8em;
   color: rgba(0, 0, 0, 0.6);
   text-transform: none;
   font-weight: 600;
@@ -75,8 +73,8 @@
   align-items: center;
   justify-content: flex-start;
   max-width: 100%;
-
 }
+
 .react-multi-email [data-tag] [data-tag-item] {
   max-width: 100%;
   overflow: hidden;
@@ -88,27 +86,3 @@
   margin-left: 0.833em;
   cursor: pointer;
 }
-ul{
-  list-style: none;
-  padding: 0;
-}
-.result_list.empty {
-  display: none;
-}
-.options{
-  vertical-align: baseline;
-  margin: 0 0.14285714em;
-  margin-top: 0.2em;
-  background-color: #f3f3f3;
-  background-image: none;
-  padding: 0.5833em 0.833em;
-  color: rgba(0, 0, 0, 0.6);
-  text-transform: none;
-  font-weight: 600;
-  border: 0 solid transparent;
-  border-radius: 0.28571429rem;
-  -webkit-transition: background 0.1s ease;
-  -o-transition: background 0.1s ease;
-  transition: background 0.1s ease;
-  font-size: 0.8rem;
-}

tsconfigs/tsconfig.es5.json

@@ -13,7 +13,7 @@
     "jsxImportSource": ""
   },
   "include": [
-    "../@axframe-datagrid/**/*"
+    "../react-multi-email/**/*"
   ],
   "exclude": [
     "node_modules",

tsconfigs/tsconfig.es6.json

@@ -11,11 +11,6 @@
     "jsx": "react",
     "jsxImportSource": ""
   },
-  "include": [
-    "../@axframe-datagrid/**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "**/tree.ts"
-  ]
+  "include": ["../react-multi-email/**/*"],
+  "exclude": ["node_modules", "**/tree.ts"]
 }