README

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

Reason:

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

Usage:

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

Setup:

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

Example:

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="www.google.com" text="google" />
          <RL href="duckdockgo.com" addClass="someClass" text="duck duck go"/>
          <RL tel href="+123456789" text="My Phone" title="not really my number" />
          <RL mail href="me@mail.com" text="mail me" title="jot something down" />

      </div>
    );
  }
}

Options:

      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

Usage no npm install needed!