score:0
as far as i know, chakra ui has no built-in functionality of current/active links. this leaves us with two options: implementing custom logic and using other libraries.
the easiest of two will be to use react-scroll library that already has this functionality.
import { link as scrolllink } from 'react-scroll';
and then use it wherever you want like so:
<scrolllink
to='home'
activeclass="active"
spy={true}
smooth={true}
offset={0}
duration={1500}>
home
</scrolllink >
to
prop is referencing to id of the element you want to scroll to, so in my example it will be an element with id #home
. make sure to pass spy={true}
prop and activeclass="yourclassname"
. you can later use this classname to style active links of the header. offset
prop defines how close or far from element the class will be toggled. and lastly, duration
prop defines how long the scroll animation will continue for.
Source: stackoverflow.com
Related Query
- Adding underline to current page section in single page react app with Chakra.ui
- Serving a static html page from a single page react app with react router
- React Single Page app with browserHistory possible?
- structure of a Backbone and React single page app
- Adding React-Redux to a React app with React.StrictMode tag
- How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?
- Navigation in a single page app with react.js
- react-router throwing 404 upon page refresh with React app hosted on GoDaddy
- Enable single page app react hot reload webpack
- React app showing page with "404 the requested path could not be found" when using Apache
- How to link to current page with different param in react router?
- Symfony 4 how to setup SPA ( single page app ) with React?
- Single page app with REST API architecture
- Style sheet to be imported based on the current active component in a multi-page React app with React-Router
- Keeping Google login persistent on reloading single page react app
- Highlight current page in bootstrap with react
- Embed a single react component created with create-react-library into html page
- State of react app is not current with what I have in my database?
- React Where to place login page for a one page app with a side menu
- React Router v6 - how to handle nested routes but with only current page showing instead of previous pages
- Show the current page after clicking the button with the route in react
- React app not loading js file when accessing it with a non home page url
- How can I show single data per page in react with javascript data file?
- React JS -- Adding multiple Children Node to a single Node without overwriting current contents
- How should I approach adding a react front-end to a web app built with rails?
- react router changing to current page with different params does not work
- React Route does not work - Single page app
- Blank page after deployment - React app with node
- Issue with Adding Components to React Page
- With react , I am trying to add a section where it shows facts for 5 second intervals. No error shown, but the facts aren't appearing on the page
More Query from same tag
- Why is switch statement used in useReducer hook to manage state?
- state district json binding react
- Change not able to update on commentsRef.on("child_changed", (data) => {
- Doing serverside debugging in reactjs
- React: In state, how would I update a nested object at a certain index?
- Electron setSize method and ReactJS
- Adding a search bar for my table, but currently not working
- Way to remove string concat in Oracle-db (Nodejs)
- Add button to each row in react-bootstrap-table next
- how to get cookie in react passed from express js api (MERN stack)
- Can't include pagination with React in API request
- Importing GeoJSON file to React-Leaflet
- How can I combine the results of 3 queries in MongoDB?
- Typescript - how to combine Union and Intersection types
- Blob URL upload to firebase storage
- Material-UI - fetching data display in DataTable => "React.useState" cannot be called inside a callback
- React Navigation 5 - How to navigate from headerRight?
- React JS Hooks - Maximum update depth exceeded
- How Insert data to two tables at once?
- Javascript Object is pushing on both indexes rather than specific index
- Loop in javascript from list
- Can CSS Grids be used in JSX Inline styles on Electron?
- Get URL pathname in nextjs
- How to get response body and response headers in one block
- Filtering an array in react with multiple values
- Default today's date in date picker using react js without using DatePicker component
- Multiline text with React
- Cannot read property 'engine' of undefined - Webpack React
- ES6 Import some functions as a object
- ReactJs functions that need refractoring (if possible)