@mazzard/react-link

#@mazzard/react-link

Install

npm i @mazzard/react-link

Link helps you to use History API, it renders a element.

props

to

default: '/'

Use to attribute like href.

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

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

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

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

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

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

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

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'))