diff --git a/.npmignore b/.npmignore index dfb5fc4..c7632f7 100644 --- a/.npmignore +++ b/.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 diff --git a/README.md b/README.md new file mode 100644 index 0000000..8c5550e --- /dev/null +++ b/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) + + + +## 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([]); + const [focused, setFocused] = React.useState(false); + + return ( +
+

Email

+ { + setEmails(_emails); + }} + autoFocus={true} + onFocus={() => setFocused(true)} + onBlur={() => setFocused(false)} + getLabel={(email, index, removeEmail) => { + return ( +
+
{email}
+ removeEmail(index)}> + × + +
+ ); + }} + /> +
+

react-multi-email value

+

Focused: {focused ? 'true' : 'false'}

+

{emails.join(', ') || 'empty'}

+ + ); +} + +export default BasicExample; +``` + +## License + +[MIT](https://opensource.org/licenses/MIT) + +> If you don't mind, don't forget to press "star" before leaving. diff --git a/components/BodyRoot.tsx b/components/BodyRoot.tsx index 5f6a24f..630763a 100644 --- a/components/BodyRoot.tsx +++ b/components/BodyRoot.tsx @@ -1,4 +1,3 @@ -import * as React from 'react'; import styled from '@emotion/styled'; const BodyRoot = styled.div` diff --git a/components/Nav.tsx b/components/Nav.tsx index 056b813..da30b09 100644 --- a/components/Nav.tsx +++ b/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 ( diff --git a/components/Spinner.css b/components/Spinner.css deleted file mode 100644 index 784d93d..0000000 --- a/components/Spinner.css +++ /dev/null @@ -1,13 +0,0 @@ -.loader { - border: 2px solid #f3f3f3; /* Light grey */ - border-top: 2px solid #3498db; /* Blue */ - border-radius: 50%; - width: 15px; - height: 15px; - animation: spin 2s linear infinite; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} \ No newline at end of file diff --git a/components/Spinner.tsx b/components/Spinner.tsx deleted file mode 100644 index fb5809f..0000000 --- a/components/Spinner.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import './Spinner.css'; - -class Spinner extends React.Component { - render() { - return ( -
- ); - } -} - -export default Spinner; diff --git a/examples/BasicExample.tsx b/examples/BasicExample.tsx index 7bc9bb8..8cfedb2 100644 --- a/examples/BasicExample.tsx +++ b/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([]); const [focused, setFocused] = React.useState(false); - const containerRef = React.useRef(null); - - React.useEffect(() => { - if (containerRef.current) { - setWidth(containerRef.current.clientWidth); - } - }, []); return ( - +

Email

([]); + + return ( + + +

Email

+ + I am placeholder ! + + } + style={{ minHeight: '100px' }} + emails={emails} + onChange={(_emails: string[]) => { + setEmails(_emails); + }} + getLabel={(email, index, removeEmail) => { + return ( +
+
{email}
+ removeEmail(index)}> + × + +
+ ); + }} + /> +
+

react-multi-email value

+

{emails.join(', ') || 'empty'}

+ + + ); +} + +const Container = styled.div` + font-size: 13px; +`; + +export default CustomizeStyleExample; diff --git a/pages/_app.tsx b/pages/_app.tsx index aff1d81..3010385 100644 --- a/pages/_app.tsx +++ b/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'; diff --git a/pages/_document.tsx b/pages/_document.tsx index 23b445f..03a63d0 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,3 +1,4 @@ +import * as React from 'react'; import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { diff --git a/pages/api/hello.ts b/pages/api/hello.ts deleted file mode 100644 index f8bcc7e..0000000 --- a/pages/api/hello.ts +++ /dev/null @@ -1,13 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type { NextApiRequest, NextApiResponse } from 'next' - -type Data = { - name: string -} - -export default function handler( - req: NextApiRequest, - res: NextApiResponse -) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/pages/customizeStyle.tsx b/pages/customizeStyle.tsx new file mode 100644 index 0000000..316a92e --- /dev/null +++ b/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 ( + + +
+

CustomizeStyle

+ +
+ + + ); +}; + +const PageContainer = styled(BodyRoot)``; + +export default Custom; diff --git a/pages/index.tsx b/pages/index.tsx index 74799cb..5ec0a13 100644 --- a/pages/index.tsx +++ b/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'; diff --git a/react-multi-email/style.css b/react-multi-email/style.css index 707b2bf..536ef98 100644 --- a/react-multi-email/style.css +++ b/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; -} \ No newline at end of file diff --git a/tsconfigs/tsconfig.es5.json b/tsconfigs/tsconfig.es5.json index 3b1ab5d..85864a5 100644 --- a/tsconfigs/tsconfig.es5.json +++ b/tsconfigs/tsconfig.es5.json @@ -13,7 +13,7 @@ "jsxImportSource": "" }, "include": [ - "../@axframe-datagrid/**/*" + "../react-multi-email/**/*" ], "exclude": [ "node_modules", diff --git a/tsconfigs/tsconfig.es6.json b/tsconfigs/tsconfig.es6.json index 71d5dac..a860977 100644 --- a/tsconfigs/tsconfig.es6.json +++ b/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"] }