react-lazy-link
v1.1.1
Published
a tool to make faster and more secure react link with less effort
Downloads
4
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="[email protected]" 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