npm package: @mazzard/react-link
Description: React component for using of History API
Author: Deight
Latest version: 1.1.2

#@mazzard/react-link
### Install
```bash
npm i @mazzard/react-link
```
`Link` helps you to use History API, it renders `a` element.
### props
#### to
> default: '/'

Use `to` attribute like `href`.
```javascript
import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'

class Test extends React.Component {
  render () {
    return (
      <>
        <Link>
          Home
        </Link>
        {' | '}
        <Link to='/test1'>
          test1
        </Link>
        {' | '}
        <Link to='/test2'>
          test2
        </Link>
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))

```
#### classNames
Use `classNames` to pass class name for active link
```javascript
import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'

const classNames = {
  root: 'link',
  active: 'link_active'
}

class Test extends React.Component {
  render () {
    return (
      <>
        <Link classNames={classNames}>
          Home
        </Link>
        {' | '}
        <Link to='/test1' classNames={classNames}>
          test1
        </Link>
        {' | '}
        <Link to='/test2' classNames={classNames}>
          test2
        </Link>
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))

```
#### exact
> default: false

Use `exact` to pass active class name for a link which is equal to URL
```javascript
import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'

const classNames = {
  active: 'link_active'
}

class Test extends React.Component {
  render () {
    return (
      <>
        <Link classNames={classNames} exact>
          Home
        </Link>
        {' | '}
        <Link to='/test1' classNames={classNames}>
          test1
        </Link>
        {' | '}
        <Link to='/test2' classNames={classNames}>
          test2
        </Link>
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))

```
#### scrollTo
> default: 0

you may use a number to scroll a page at pixels
```javascript
import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'

class Test extends React.Component {
  render () {
    return (
      <>
        <div style={{height: '700px'}} />
        <Link>
          Home
        </Link>
        {' | '}
        <Link to='/test' scrollTo={700} id='test'>
          test
        </Link>
        <div style={{height: '1700px'}} />
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))
```
or you may use CSS selector of an element which should be visible
```javascript
import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'

class Test extends React.Component {
  render () {
    return (
      <>
        <div style={{height: '700px'}} />
        <Link>
          Home
        </Link>
        {' | '}
        <Link to='/test' scrollTo='#test' id='test'>
          test
        </Link>
        <div style={{height: '1700px'}} />
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))
```
#### scrollTimeout
> default: 0


you may add timeout of the scrolling
```javascript
import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'

class Test extends React.Component {
  render () {
    return (
      <>
        <div style={{height: '700px'}} />
        <Link>
          Home
        </Link>
        {' | '}
        <Link to='/test' scrollTo={700} scrollTimeout={1000}>
          test
        </Link>
        <div style={{height: '1700px'}} />
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))
```
### extension
You may extend `Link` to set default class names
```javascript
import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'

class A extends Link {
  className = 'link'
  classNames = {
    active: 'link_active'
  }
}

class Test extends React.Component {
  render () {
    return (
      <>
        <A>
          Home
        </A>
        {' | '}
        <A to='/test1'>
          test1
        </A>
        {' | '}
        <A to='/test2'>
          test2
        </A>
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))
```
You may extend `Link` to set default props
```javascript
import React from 'react'
import ReactDom from 'react-dom'
import Link from '@mazzard/react-link'

class A extends Link {
  static props = {
    to: '/home'
  }
}

class Test extends React.Component {
  render () {
    return (
      <>
        <A>
          Home
        </A>
        {' | '}
        <A to='/test1'>
          test1
        </A>
        {' | '}
        <A to='/test2'>
          test2
        </A>
      </>
    )
  }
}

ReactDom.render(<Test />, document.getElementById('root'))
```