npmpackage.info

Gathering detailed insights and metrics for react-text-format

Other packages similar to react-text-format

react-number-format

5.4.4

React component to format number in an input or as a text.

react-currency-format

1.1.0

React component to format currency in an input or as a text.

@maskito/react

3.9.1

The React-specific Maskito's library

react-format-text

1.1.1

Simple link and newline text formatting for react

Gathering detailed insights and metrics for react-text-format

react-text-format - 2.0.32 | npmpackage.info

react-text-format

React component to parse urls, emails, credit cards, phone in text into clickable links or required format

2.0.32

MIT

JavaScript

12.29 kB

253,655 1.7

Installations

npm install react-text-format

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>=8

Node Version

18.16.0

NPM Version

9.5.1 Score

75.6

Supply Chain

94.8

Quality

75.7

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

8

Total

75

Closed

65

Merged

2

Issues

Open

6

Total

10

Closed

4

Releases

Unable to fetch releases

Languages

JavaScript

HTML

CSS

JavaScript (97.94%)

HTML (1.42%)

CSS (0.63%)

Developer

react-ninja

Download Statistics

Total Downloads

253,655

Last Day

Last Week

613

Last Month

3,737

Last Year

63,289

GitHub Statistics

MIT License

16 Stars

63 Commits

8 Forks

2 Watchers

9 Branches

3 Contributors

Updated on Apr 16, 2024

Bundle Size

35.46 kB

Minified

12.29 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

2.0.32

Package Id

react-text-format@2.0.32

Unpacked Size

840.98 kB

Size

186.01 kB

File Count

NPM Version

9.5.1

Node Version

18.16.0

Published on

Jan 05, 2024

Total Downloads

Cumulative downloads

Total Downloads

253,655

Last Day

36.8%

Compared to previous day

Last Week

-36%

613

Compared to previous week

Last Month

-56.5%

3,737

Compared to previous month

Last Year

23.4%

63,289

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

react-text-format

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

View live demo here

Installation

yarn add react-text-format

npm install react-text-format --save

Basic Usage

1import ReactTextFormat from 'react-text-format';
2
3React.render(
4    <ReactTextFormat>
5      This is demo link http://www.google.com
6      This is demo email <span data-email="miller@yahoo.com">miller@yahoo.com</span>
7
8      This is demo image https://preview.ibb.co/hqhoyA/lexie-barnhorn-1114350-unsplash.jpg
9
10      This is demo credit Card 5555555555554444
11      This is demo phone Number 123.456.7890
12      This is demo phone Number (212) 555 1212
13      This is demo phone Number (212) 555-1212
14      This is demo phone Number 212-555-1212 ext. 101
15      This is demo phone Number 212 555 1212 x101
16
17      This is an anchor <a href="http://formatter.com">http://formatter.com</a>;
18    </ReactTextFormat>,
19  document.body
20);

Output:

Generated Avatar

Advance Usage

1import ReactTextFormat from 'react-text-format';
2
3customLinkDecorator = (
4    decoratedHref: string,
5    decoratedText: string,
6    linkTarget: string
7  ): React.Node => {
8    return (
9      <a
10        href={decoratedHref}
11
12        target={linkTarget}
13        rel='noopener'
14        className='customLink'
15      >
16        {decoratedText}
17      </a>
18    )
19  }
20
21customImageDecorator = (
22    decoratedURL: string
23    ): React.Node => {
24    return (
25      <div>
26        <img src={decoratedURL}  rel='noopener' width="100" className='customImage' />
27      </div>
28)
29}
30
31customEmailDecorator = (
32    decoratedHref: string,
33    decoratedText: string
34    ): React.Node => {
35    return (
36      <a href={decoratedHref}  className='customEmail'>
37        {decoratedText}
38      </a>
39    )
40}
41
42customPhoneDecorator = (
43    decoratedText: string
44    ): React.Node => {
45    return (
46      <a href={`tel:${decoratedText}`} className='customPhone'>
47        {decoratedText}
48      </a>
49    )
50}
51
52customCreditCardDecorator = (
53    decoratedText: string
54    ): React.Node => {
55    return (
56      <i  className='customCreditCard'>
57        <b>{decoratedText}</b>
58      </i>
59    )
60}
61
62customTermDecorator = (decoratedText: string): React.Node => {
63  return (
64    <b  className="keyword">
65      {decoratedText}
66    </b>
67  );
68};
69
70React.render(
71    <ReactTextFormat
72          allowedFormats={['URL', 'Email', 'Image', 'Phone', 'CreditCard']}
73          linkDecorator={customLinkDecorator}
74          emailDecorator={customEmailDecorator}
75          phoneDecorator={customPhoneDecorator}
76          creditCardDecorator={customCreditCardDecorator}
77          imageDecorator={customImageDecorator}
78          terms={["Link", "phone", "image", "Anchor", "email", "Credit"]}
79          >
80            This is demo link http://www.google.com
81            This is encoded Link http://go%2Emsn%2Ecom/nl/133942%2Easp
82            This is demo email <span data-email="miller@yahoo.com">miller@yahoo.com</span>
83
84            This is demo image
85            https://preview.ibb.co/hqhoyA/lexie-barnhorn-1114350-unsplash.jpg
86
87            This is demo credit Card 5555555555554444
88
89            This is demo phone Number 123.456.7890
90            This is demo phone Number (212) 555 1212
91            This is demo Phone Number (212) 555-1212
92            This is demo phone Number 212-555-1212 ext. 101
93            This is demo phone Number 212 555 1212 x101
94
95            This is an anchor <a href="http://formatter.com">http://formatter.com</a>;
96        </ReactTextFormat>,
97        document.body
98);

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>`

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

74 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5
Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm

Score

1.7

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-text-format

Other packages similar to react-text-format

react-text-format

Installations

Developer Guide

No

CommonJS

>=8

18.16.0

9.5.1

Score

Pull Requests

8

75

65

2

Issues

6

10

4

Releases

Unable to fetch releases

Languages

Developer

react-ninja

Download Statistics

GitHub Statistics

Bundle Size

35.46 kB

12.29 kB

Maintainers

Package Meta Information

Total Downloads

253,655

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-text-format

Installation

Basic Usage

Output:

Advance Usage

Output:

Props

10

10

0

0

0

0

0

0

0

0

1.7

/10