@fdmg/ts-react-anchor

ReactJS Anchor component

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
11May 7, 2020Nov 27, 2017Minified + gzip package size for @fdmg/ts-react-anchor in KB

Readme

fdmg-ts-react-anchor

Build Status Coverage Status npm version Greenkeeper badge

ReactJS Anchor component. This component renders an Anchor header. You might think it silly to have this as a separate component. But when you use an Anchor-element multiple times in your project then having that as a component might eventually save you some bytes.

Installation

  • Run npm i --save-dev @fdmg/ts-react-anchor

or

  • Run yarn add @fdmg/ts-react-anchor --dev

Usage

TypeScript

import * as React from 'react';
import A from 'fdmg-ts-react-anchor';

export default class foo {
    public state: any;
    public props: any;

    constructor(props: any) {
        super(props);
        this.props = props;
    }

    render() {
        return (<span>
            <A className={'css-class-name'}>Anchor text</A>
            <A className={'css-class-name'} title='Title text'>Anchor text</A>
            <A className={'css-class-name'} ariaLabel='ARIA-label text'>Anchor text</A>
            <A className={'css-class-name'} title='Title text' ariaLabel='ARIA-label text'>Anchor text</A>
            <A href="https://fd.nl" 
                className={'css-class-name'} 
                title='Title text' 
                ariaLabel='ARIA-label text' 
                target="_blank" 
                tabIndex='2'>Anchor text</A>
        </span>);
    }
}

Resulting HTML

<span>
    <a class="css-class-name" aria-label="Anchor text" tabIndex="0">Anchor text</a>
    <a class="css-class-name" aria-label="Title text" tabIndex="0">Anchor text</a>
    <a class="css-class-name" aria-label="ARIA-label text" tabIndex="0">Anchor text</a>
    <a class="css-class-name" aria-label="ARIA-label text" tabIndex="0">Anchor text</a>
    <a href="https://fd.nl" class="css-class-name" aria-label="ARIA-label text" target="_blank" tabIndex="2">Anchor text</a>
</span>

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.