This is a react wrapper for email-misspelled package
Check the misspelled email's domain and return a list (or first) of matching domain suggestions sorted by corrections needed

The string comparison is based on this algorithm

Table of Contents

1. Install
2. <EmailMisspelledWithInput />
   • usages
   • props
3. <EmailMisspelledSuggestFirst />
   • usages
   • props
4. <EmailMisspelledSuggestList />
   • usages
   • props
5. Typescript support

Install with npm:

    npm i react-email-misspelled --save

Install with yarn:

    yarn add react-email-misspelled

This component contains a div with a text input and the suggestions list

• Usages
• Props
  • label

Usage

To use this components you just need to import the component and the domains list you want to check

import { EmailMisspelledWithInput, top100 } from "react-email-misspelled"

export default FancyComponent () => {
    return <EmailMisspelledWithInput domains={top100} />
}

label

| Type | Required | Description | | :--- | :------- | :---------- | | string | false | String display in the label element |

import { EmailMisspelledWithInput, top100 } from "react-email-misspelled"

export default FancyComponent () => {  
    return <EmailMisspelledWithInput  
        domains={top100}  
        label="Your email address"  
    />  
}  

This will just return a div with the more accurate result

• Usages
• Props
  • className

Usage

To use this components you just need to import the component and the domains list you want to check

import { EmailMisspelledSuggestFirst, top100 } from "react-email-misspelled"

export default FancyComponent () => {
    return <EmailMisspelledSuggestFirst domains={top100} />
}

label

| Type | Required | Description | | :--- | :------- | :---------- | | string | false | Add your classname |

import { EmailMisspelledWithInput, top100 } from "react-email-misspelled"

export default FancyComponent () => {  
    return <EmailMisspelledSuggestFirst  
        domains={top100}  
        className="foo bar"  
    />  
}  

This will just return a div with the more accurate result

• Usages
• Props
  • className

Usage

To use this components you just need to import the component and the domains list you want to check

import { EmailMisspelledSuggestList, top100 } from "react-email-misspelled"

export default FancyComponent () => {
    return <EmailMisspelledSuggestList domains={top100} />
}

label

| Type | Required | Description | | :--- | :------- | :---------- | | string | false | Add your classname |

import { EmailMisspelledSuggestList, top100 } from "react-email-misspelled"

export default FancyComponent () => {  
    return <EmailMisspelledSuggestList  
        domains={top100}  
        className="foo bar"  
    />  
}  

description...

TypeName

    import { TypeName } from "react-email-misspelled/typings"

    //type

TODO

• [ ] Doc
• [ ] TU
• [ ] TS