react-text-format

    2.0.28 • Public • Published

    react-text-format

    React Component to find and parse links, emails, phone numbers, image's URL, credit cards and keywords to required format.

    NPM JavaScript Style Guide

    View live demo here

    Installation

    yarn add react-text-format
    

    or

    npm install react-text-format --save
    

    Basic Usage

    import ReactTextFormat from 'react-text-format';
     
    React.render(
        <ReactTextFormat>
          This is demo link http://www.google.com
          This is demo email <span data-email="miller@yahoo.com">miller@yahoo.com</span>
     
          This is demo image https://preview.ibb.co/hqhoyA/lexie-barnhorn-1114350-unsplash.jpg
     
          This is demo credit Card 5555555555554444
          This is demo phone Number 123.456.7890
          This is demo phone Number (212) 555 1212
          This is demo phone Number (212) 555-1212
          This is demo phone Number 212-555-1212 ext. 101
          This is demo phone Number 212 555 1212 x101
     
          This is an anchor <a href="http://formatter.com">http://formatter.com</a>;
        </ReactTextFormat>,
      document.body
    );
    Output:

    Generated Avatar

    Advance Usage

    import ReactTextFormat from 'react-text-format';
     
    customLinkDecorator = (
        decoratedHref: string,
        decoratedText: string,
        linkTarget: string
      ): React.Node => {
        return (
          <a
            href={decoratedHref}
     
            target={linkTarget}
            rel='noopener'
            className='customLink'
          >
            {decoratedText}
          </a>
        )
      }
     
    customImageDecorator = (
        decoratedURL: string
        ): React.Node => {
        return (
          <div>
            <img src={decoratedURL}  rel='noopener' width="100" className='customImage' />
          </div>
    )
    }
     
    customEmailDecorator = (
        decoratedHref: string,
        decoratedText: string
        ): React.Node => {
        return (
          <a href={decoratedHref}  className='customEmail'>
            {decoratedText}
          </a>
        )
    }
     
    customPhoneDecorator = (
        decoratedText: string
        ): React.Node => {
        return (
          <a href={`tel:${decoratedText}`} className='customPhone'>
            {decoratedText}
          </a>
        )
    }
     
    customCreditCardDecorator = (
        decoratedText: string
        ): React.Node => {
        return (
          <i  className='customCreditCard'>
            <b>{decoratedText}</b>
          </i>
        )
    }
     
    customTermDecorator = (decoratedText: string): React.Node => {
      return (
        <b  className="keyword">
          {decoratedText}
        </b>
      );
    };
     
    React.render(
        <ReactTextFormat
              allowedFormats={['URL', 'Email', 'Image', 'Phone', 'CreditCard']}
              linkDecorator={customLinkDecorator}
              emailDecorator={customEmailDecorator}
              phoneDecorator={customPhoneDecorator}
              creditCardDecorator={customCreditCardDecorator}
              imageDecorator={customImageDecorator}
              terms={["Link", "phone", "image", "Anchor", "email", "Credit"]}
              >
                This is demo link http://www.google.com
                This is encoded Link http://go%2Emsn%2Ecom/nl/133942%2Easp
                This is demo email <span data-email="miller@yahoo.com">miller@yahoo.com</span>
     
                This is demo image
                https://preview.ibb.co/hqhoyA/lexie-barnhorn-1114350-unsplash.jpg
     
                This is demo credit Card 5555555555554444
     
                This is demo phone Number 123.456.7890
                This is demo phone Number (212) 555 1212
                This is demo Phone Number (212) 555-1212
                This is demo phone Number 212-555-1212 ext. 101
                This is demo phone Number 212 555 1212 x101
     
                This is an anchor <a href="http://formatter.com">http://formatter.com</a>;
            </ReactTextFormat>,
            document.body
    );
    Output:

    Generated Avatar

    Props

    Name Type Default
    allowedFormats Array ['URL', 'Email', 'Image', 'Phone', 'CreditCard', 'Term'] ['URL', 'Email', 'Phone', 'Term']
    linkTarget String (_blank | _self | _parent | _top | framename) _self
    terms Array of strings []
    linkDecorator React.Node (decoratedHref: string, decoratedText: string, linkTarget: string) Output Format: <a href="{URL}" target="{target}" rel='noopener' className='rtfLink'> <URL> </a>
    emailDecorator React.Node (decoratedHref: string, decoratedText: string) Output Format:<a href="mailto: {EMAIL ADDRESS}" className='rtfEmail'> {EMAIL ADDRESS} </a>
    phoneDecorator React.Node (decoratedText: string) Output Format<a href="tel:{PHONE NUMBER}" className='rtfEmail'> {PHONE NUMBER} </a>
    creditCardDecorator React.Node (decoratedText: string) Output Format: <span className='rtfCreditCard'> {CREDIT CARD NUMBER} </span>
    imageDecorator React.Node (decoratedURL: string) Output Format: <img src="{URL OF IMAGE}" rel='noopener' className='rtfImage' />
    termDecorator React.Node (decoratedText: string) Output Format: <span className='rtfTerm'>{decoratedText}</span>

    Install

    npm i react-text-format

    DownloadsWeekly Downloads

    741

    Version

    2.0.28

    License

    MIT

    Unpacked Size

    846 kB

    Total Files

    8

    Last publish

    Collaborators

    • ahsan.bilal