a tool to make faster and more secure react link with less effort

Usage no npm install needed!

<script type="module">
  import reactLazyLink from '';


React Lazy link Component

It's the link choice for the (lazy) react developer.

The only thing you really need is the href, React lazy links fixed the rest.

GET IT WITH NPM -> npm i react-lazy-link


Links are not hard. They are not tricky but we do them pretty much everyday and we forget target="_blank", rels and attr, we forget to change their "lovely" blue color other stuff is grunt work but still matters. React Lazy Link is just an easy little hackable component that takes care of these chores.

The link have a default style setting of:

|  color: black;                |
|  pointer: cursor;             |
|  font-size: 	12pt;           |
|  text-transform: capitalize;  |
|  text-decoration: none;       |

If you add a style class as a prop (addClass) the native of react-lazy-link styling will be nullified


Start with a React project, bootstrapped, boilerplate or homemade should make no difference. I made this component in a create-react-app enviroment and I use prettier for code style.

steps to be up and running


1: Create-react-app MyApp 2: $_ 3: npm i react-lazy-link


import React, { Component } from 'react';
import './App.css';
import RL from './components/react-link'

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">React Lazy Link</header>
          <RL href="" text="google" />
          <RL href="" addClass="someClass" text="duck duck go"/>
          <RL tel href="+123456789" text="My Phone" title="not really my number" />
          <RL mail href="" text="mail me" title="jot something down" />



      name      type     Requirement
   | href :     string :  Required | 
   | ------------------------------|
   | alt :      string :  Optional |
   | text :     string :  Optional |
   | addClass : string :  Optional |
   | mail :     bool   :  Optional |
   | tel :      bool   :  Optional |

PR's suggestions, improvement and additions are welcome!

Project by 2lach Sep - 2018