Skip to content

Commit f92c02b

Browse files
partners-wlipartners-wli
committed
:initial commit
1 parent de0b700 commit f92c02b

22 files changed

+3164
-1
lines changed

‎.editorconfig‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.eslintignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
build/
2+
dist/
3+
node_modules/
4+
.snapshots/
5+
*.min.js

‎.eslintrc‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"parser": "babel-eslint",
3+
"extends": [
4+
"standard",
5+
"standard-react",
6+
"plugin:prettier/recommended",
7+
"prettier/standard",
8+
"prettier/react"
9+
],
10+
"env": {
11+
"node": true
12+
},
13+
"parserOptions": {
14+
"ecmaVersion": 2020,
15+
"ecmaFeatures": {
16+
"legacyDecorators": true,
17+
"jsx": true
18+
}
19+
},
20+
"settings": {
21+
"react": {
22+
"version": "16"
23+
}
24+
},
25+
"rules": {
26+
"space-before-function-paren": 0,
27+
"react/prop-types": 0,
28+
"react/jsx-handler-names": 0,
29+
"react/jsx-fragments": 0,
30+
"react/no-unused-prop-types": 0,
31+
"import/export": 0
32+
}
33+
}

‎.gitignore‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# OS Files
2+
.DS_Store
3+
Thumbs.db
4+
5+
# Dependencies
6+
node_modules/
7+
8+
# Dev/Build Artifacts
9+
/tests/e2e/videos/
10+
/tests/e2e/screenshots/
11+
/tests/unit/coverage/
12+
jsconfig.json
13+
14+
# Local Env Files
15+
.env.local
16+
.env.*.local
17+
18+
# Log Files
19+
*.log
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*
23+
24+
# Unconfigured Editors
25+
.idea
26+
*.suo
27+
*.ntvs*
28+
*.njsproj
29+
*.sln
30+
*.sw*
31+
#Yarn
32+
yarn.lock

‎.prettierrc‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"singleQuote": true,
3+
"jsxSingleQuote": true,
4+
"semi": false,
5+
"tabWidth": 2,
6+
"bracketSpacing": true,
7+
"jsxBracketSameLine": false,
8+
"arrowParens": "always",
9+
"trailingComma": "none"
10+
}

‎.travis.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
language: node_js
2+
node_js:
3+
- 12
4+
- 10

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
1.0.0 (JULY 24, 2020)
2+
Initial release

‎README.md‎

Lines changed: 144 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,144 @@
1-
# ReactJS-Email
1+
# ReactJS - Email Component
2+
3+
ReactJS based Email component, provides input field to add single / multiple emails with validation. The email value is automatically validated on blur event. You can change validation message using props. You can also disable email field using disable props.
4+
5+
## Table of contents
6+
7+
- [Browser Support](#browser-support)
8+
- [Demo](#demo)
9+
- [Getting started](#getting-started)
10+
- [Usage](#usage)
11+
- [Available Props](#available-props)
12+
- [Methods](#methods)
13+
- [Want to Contribute?](#want-to-contribute)
14+
- [Collection of Components](#collection-of-components)
15+
- [Changelog](#changelog)
16+
- [License](#license)
17+
- [Keywords](#Keywords)
18+
19+
## Browser Support
20+
21+
| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |
22+
| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
23+
| 83.0 ✔ | 77.0 ✔ | 13.1.1 ✔ | 83.0 ✔ | 11.9 ✔ |
24+
25+
## Demo
26+
27+
[![](email.gif)](https://github.com/weblineindia/ReactJS-Email/email.gif)
28+
29+
## Getting started
30+
31+
Install the npm package:
32+
33+
```bash
34+
npm install react-weblineindia-email
35+
#OR
36+
yarn add react-weblineindia-email
37+
```
38+
39+
## Usage
40+
41+
Use the `<react-weblineindia-email>` component:
42+
43+
```js
44+
import React ,{ Component } from 'react';
45+
import Email from 'react-weblineindia-email'
46+
class Test extends Component {
47+
constructor(props) {
48+
super(props);
49+
this.state = {
50+
emailValue:[{email:""}]
51+
};
52+
}
53+
onMultipleEmail() {
54+
this.state.emailValue.push({
55+
email: "",
56+
});
57+
}
58+
onChange(event, index) {
59+
debugger;
60+
let value = this.state.emailValue;
61+
value[index].email = event.target.value;
62+
this.setState({
63+
emailValue: value,
64+
});
65+
}
66+
render() {
67+
return (
68+
<div className="App">
69+
{this.state.emailValue.map((item, i) => {
70+
return (
71+
<div key={i}>
72+
<Email
73+
isShowPlus={this.state.emailValue.length - 1 === i}
74+
value={this.state.emailValue}
75+
index={i}
76+
onMultipleEmail={this.onMultipleEmail.bind(this)}
77+
onChange={this.onChange.bind(this)}
78+
/>
79+
</div>
80+
);
81+
})}
82+
</div>
83+
);
84+
}
85+
}
86+
export default Test;
87+
88+
```
89+
90+
## Available Props
91+
92+
| Prop | Type | default | Description |
93+
| ------------------- | ------------- | ----------------------- | --------------------------------------------- |
94+
| maxlength | Number | 50 | maxlength for email |
95+
| id | String | | email id |
96+
| emailFormateError | String | Email is not valid | email formate validation |
97+
| duplicateEmailError | String | Do not enter same email | duplicate email error |
98+
| onMultipleEmail | Function | | when click on plus icon on email |
99+
| name | String | email | email name. |
100+
| index | Number | 0 | email index. |
101+
| values | Array[Object] | [{email : ''}] | email default array |
102+
| isMultiple | Boolean | true | flag to implement multiple email |
103+
| isShowPlus | Boolean | false | flag to show plus icon for add multiple email |
104+
| placeholder | String | Email | email placeholder |
105+
| disabled | Boolean | false | disable input field |
106+
| tabindex | Number | 0 | email tabIndex |
107+
108+
## Methods
109+
110+
| Name | Description |
111+
| ----------- | --------------------------------------------------- |
112+
| focus | Gets triggered when the input field receives focus. |
113+
| blur | Gets triggered when the input field loses focus. |
114+
| inputChange | Gets triggered every time input got changed. |
115+
116+
## Want to Contribute?
117+
118+
- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
119+
- [Fork it](http://help.github.com/forking/).
120+
- Create new branch to contribute your changes.
121+
- Commit all your changes to your branch.
122+
- Submit a [pull request](http://help.github.com/pull-requests/).
123+
124+
---
125+
126+
## Collection of Components
127+
128+
We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html)
129+
130+
---
131+
132+
## Changelog
133+
134+
Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).
135+
136+
## License
137+
138+
[MIT](LICENSE)
139+
140+
[mit]: https://github.com/weblineindia/ReactJS-Email/blob/master/LICENSE
141+
142+
## Keywords
143+
144+
react-weblineindia-email, react-email, reactjs-email, email-component, email-validation, react-mail-validation

‎dist/index.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@import url('https://use.fontawesome.com/releases/v5.0.8/css/all.css');
2+
._style__error-msg__3MxmM {
3+
color: red;
4+
}
5+
._style__add-remove__AYaEf {
6+
top: 0px;
7+
padding: 0 0 0 5px;
8+
position: absolute;
9+
}
10+
11+
._style__add-remove__AYaEf span {
12+
padding: 0 0 0 5px;
13+
font-size: 12px;
14+
font-weight: normal;
15+
color: #2c3e50;
16+
}
17+
._style__list-view__2ZQmc {
18+
margin: auto;
19+
width: 80%;
20+
position: relative;
21+
}
22+
._style__form-control__2LI2p {
23+
width: 50%;
24+
padding: 12px 20px;
25+
margin: 8px 0;
26+
display: inline-block;
27+
border: 1px solid #ccc;
28+
box-sizing: border-box;
29+
}

0 commit comments

Comments
 (0)