@crave/farmblocks-link

A react component for links

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
2023Jun 15, 2021Aug 23, 2017Minified + gzip package size for @crave/farmblocks-link in KB

Readme

logo-farmblocks

Farmblocks-Links

A React component to create links. See Storybook

Installation

npm install @crave/farmblocks-link

Usage

A Link renders a stylized <a> tag, which has to have a href value or a function to handle onClick, as well as a children element.

import React from "react";
import ReactDOM from "react-dom";
import Link from "@crave/farmblocks-link";
import { linkTypes } from "@crave/farmblocks-link";

const root = document.createElement("div");

ReactDOM.render(
  <Link href="#" type={linkTypes.NEUTRAL} size="14" lineHeight="1.14">
    This is a link!
  </Link>,
  root,
);

document.body.appendChild(root);

API

Property Description Type
children the contents of the card React.Node
href an URI to a desired destination string
type the type of link (reflects on color and text-decoration) string. One of FEATURED, NEUTRAL, NORMAL or WHITE constants from linkTypes.js or any valid CSS color
disabled indicates a disabled link boolean
onClick a function to handle an onClick event function
leftIcon an icon to be placed on the left side of the link node
rightIcon an icon to be placed on the right side of the link node
external an indication of an external link (an icon will be placed on the right side of the link) boolean
size a font-size css value for children number
lineHeight a line-height css value for children number or string
fontWeight a font-weight css value for children number or string

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.