Hi!
I want to create a general breadcrumb component that should update state based on router changes. What is a good way for the component to know about state changes based on router?
Hi!
I want to create a general breadcrumb component that should update state based on router changes. What is a good way for the component to know about state changes based on router?
By listening for routeChange
event on router (for example on main View’s router):
import { f7, f7ready } from 'framework7-react';
import { useState, useEffect } from 'react';
const Breadcrumbs = () => {
const [route, setRoute] = useState(null);
const onRouteChange = (newRoute) => {
setRoute(newRoute);
}
useEffect(() => {
f7ready(() => {
setRoute(f7.views.main.router.currentRoute);
f7.views.main.on('routeChange', onRouteChange)
});
return () => {
f7.views.main.off('routeChange', onRouteChange)
}
}, [])
return (
<div>Current url is {route.url}</div>
)
}
Wait, you can get the f7 and f7ready from ‘framework7-react’? You should document that. You wouldn’t believe the weird code I’ve needed to get there.
Maybe you added those when you did svelte? There is documentation for that in the svelte area, but not React (or Vue).
It is there https://framework7.io/react/react-component-extensions.html
If you use functional components, then previously described extensions will not work. Framework7 instance,
f7ready
method andtheme
can be imported directly from Framework7-React library. Device, Request and Support can be imported directly from Framework7 core library.
Weird it didn’t come up in search. Glad to have these!