Skip to content

mmTareque01/react-smooth-hash-link

Repository files navigation

react-smooth-hash-link

**********{ react-smooth-hash-link }**********

The project "react-smooth-hash-link" is a very simple but essential program for every developer. This project will make it easier for developers to create hash links in React projects. There are other projects that do the same task, but they have some issues like some of them don't work in the mobile version, some of them can not generate shareable links using hash, which is a big problem. This project has solved all of these problems. Now let's enjoy the program. Happy Coding.....

![npm]

This is a solution to React Router's issue of not scrolling to #hash-fragments when using the <Link> component to navigate.

When you click on a link created with react-smooth-hash-link it will scroll to the element on the page with the id that matches the #hash-fragment in the link. This will also work for elements that are created after an asynchronous data load.

Basics

npm i react-smooth-hash-link

react is a peer dependency.

<HashLink>

import { HashLink } from 'react-smooth-hash-link'

...

// use it just like a RRv6 <Link>
// the 'to' props accept only hash link (#anything or /#anything)
// the 'menu' props accept string or a set of tags. To learn more follow the documentation


<HashLink to="/some/path#with-hash-fragment" menu={'Demo'}/>

Scrolling API

stopSmooth

  • By default it uses smooth scrooling. But if you don't want to use smooth scrooling then use 'stopSmooth'
  • Smooth scroll to the element
  • React Router Hash Link uses the native Element method element.scrollIntoView() for scrolling, and when the smooth prop is present it will call it with the smooth option, element.scrollIntoView({ behavior: 'smooth' })
  • Note that not all browsers have implemented options for scrollIntoView - see MDN and Can I Use - there is also a browser polyfill for smooth scrolling which you can install separately so smooth will work in all browsers
import { HashLink } from 'react-smooth-hash-link'

...

<HashLink to="/some/path#with-hash-fragment" stopSmooth menu={'Demo'}/>

Style

className

  • Like other component, you also can change it's style using className attribute. You can add any css class here.

Example

visit the link https://codesandbox.io/s/eager-buck-w5zkpk

Contact or Help

  • If you need any help, you can contact me through facebook. Steps are written bellow.

Steps:

  • go to facebook
  • click on 'Book Now'
  • Select the time slot
  • Then I will knock you. Thank you

About

react-smooth-hash-link

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published