**********{ 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.....
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.
npm i react-smooth-hash-link
react
is a peer dependency.
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'}/>
- 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 thesmooth
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 sosmooth
will work in all browsers
import { HashLink } from 'react-smooth-hash-link'
...
<HashLink to="/some/path#with-hash-fragment" stopSmooth menu={'Demo'}/>
- Like other component, you also can change it's style using
className
attribute. You can add any css class here.
visit the link https://codesandbox.io/s/eager-buck-w5zkpk
- If you need any help, you can contact me through facebook. Steps are written bellow.
- go to facebook
- click on 'Book Now'
- Select the time slot
- Then I will knock you. Thank you