Skip to content

John-Atha/url-formatter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Url-Formatter

  • This is a simple ReactJs (with npx create-react-app) component to format urls of 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

About

A simple react component (npm package) to format the urls of a text

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published