Url-Formatter

• This is a simple ReactJs (with npx create-react-app) component to format the urls of a text

• It uses a simple javascript code snippet to split the text

• Then, a regural expression is used during render to filter the text parts, and with some HTML and CSS simple tricks, the urls are displayed as clickable hrefs

• Most importantly, the initial text format (spaces, new lines, etc) remains the same

Quick demo

url-formatter

Github repository

url-formatter

Installation

• Install using npm i url-formatter

Quick start/Usage:

In a React app:

    import { UrlFormatter } from 'url-formatter';

Basic Usage

• Pass the text you want to format with the text prop
• Text should be a string

    <UrlFormatter text={text} />

Styling

Text container styling

• you can define the container styling giving the prop style which should be an object and follow the general rules of decalring styling in react (css)
• example:

    <UrlFormatter text={text} style={{'border': '1px solid red'}}/>

Urls styling

• you can define the urls styling giving the prop url which should be an object (again following the general styling syntax)
• example:

    <UrlFormatter text={text} url={{'color': 'red'}}/>

Other words styling

• you can define the simple words styling giving the prop word which should be an object (again following the general styling syntax)
• example:

    <UrlFormatter text={text} word={{'color': 'red'}}/>

Space character length

• you can define the length of the space character giving the prop space as string
• the default value is 4px
• example:

    <UrlFormatter text={text} space={'4px'}/>

In general, bear in mind that

• words are divided by whitespaces and then they are rendered as seperate divs
• as a result, they are going to inherit all their ancestors' CSS

Contact me

• Developer: Giannis Athanasiou
• Github: John-Atha
• Email: [email protected]