In my app, in the navbar, the menu hamburger and the back button are sharing the same space, and one or the other is shown based on page.
I would like to implement something like :
<Nav/>
<Page nav={backButton}/>
or
<Page nav={Menu}/>
Any ideas or links to docs would be greatly appreciated
Thanks!
Normally I'd try to make this prop driven. Your parent component can pass down a showBackButton prop that acts as a switch.
{ showBackButton ? <BackButton /> : <HamburgerMenu /> }
Related
I have this existing component in my React app, rendered on a certain Page:
{data.program && (
<RelatedHeader
icon={data.program.icon}
url={data.program.url}
title={data.program.title}
/>
)}
Now this Page can have a brand/theme value: e.g. blue provided from backend.
When for this page theme === blue is set, I need to pass other data in the props:
<RelatedHeader
icon={MyMapping['Blue'].Icon}
title={MyMapping['Blue'].Title}
/>
I know I can add a ternary like icon={theme === blue ? MyMapping['Blue'].Icon : data.program.icon}, but then I have to repeat that for all the props.
Is there a smarter, cleaner way of achieving this?
I have similar problem as in Refresh the page only once in react class component.
There are several pages in my application and I move between them using BrowserRouter and useNavigate (react-router-dom v6). One of pages has greater size div and when I go back to main page, it's(main's) css gets messed up(button position changes, some media file grows out of divs, hovers are not displayed) until I refresh page(main page). As soon as I refresh page, everything sets up well.
I used code snippet provided by #rommyarb in the link above. It works, but there is time delay (less 1sec, still visible). Which means when we navigate back(navigate(-1)), it first renders mainpage with broken css --> (0.2-0.5s) then it refreshes and css is recovered.
Time delay is not big, but still it would be unpleasant user experience. Is there any way to first refresh page (localhost/main) then render component with proper css.
Any help would be appreciated!
Code:
function App() {
return (
<Router>
<Routes>
<Route exact path='/' element={<MainPage props ={props}/>} />
<Route path='/UnderConstruction' element={<UnderConstruction/>}/>
</Routes>
</Router>
)
}
function UnderConstruction(props) {
let navigate = useNavigate();
return (
<div className='UnderConstruction' style={somestyles}>
<h2>This page is under construction</h2>
<div style={somestyles}>
<img src={under_construction.jpg'} width="100%" height="60%" />
<Button style={somestyles} onClick={() => {
navigate(-1)
}}> Go Back</Button>
</div>
</div>
);
I solved problem. The makeStyles return function(hook), when we call it within component, we can access only styles naming, which is string. So, every time we call a function, naming changes (makeStyles-element-number) due to global counter. I saved styles in state, which saved only string name. After re-rendering actual styles name was changed(makeStyles-element-number incremented) and the one I saved mismatched with actual styles. The simple solution was not storing makeStyles styles in state.
For more details read: Internal implementation of "makeStyles" in React Material-UI?
React-admin has a <Pagination /> component (link).
From my understanding this component needs to be used inside a list component like this: <List pagination={<Pagination />}>
I want to use the <Pagination /> component inside a custom layout, like a <div>.
I tried using pagination inside a <ListBase /> but that still doesn't work.
My question is, how can I add the react-admin pagination to other custom components, for example a grid view, instead of a list view.
What I want to achieve is something like this grid with pagination:
example image or, pagination for a table made out of divs.
Did you check the source code of List to see how it uses that 'pagination' prop?
It is just a rendered component. Nothing more. Just it has to be inside ListContext.
You can use it wherever you like.
<ListBase>
<Pagination>
</ListBase>
I would like to render a child inside <MapContainer> from outside the initial MapContainer. Is this possible somehow?
In react-leaflet-v3 I render a lot of items on the map by passing the map object via a reference. But for my current situation I wold like to render a react button on top of the map based on routing.
One way of doing this is to add nest <Route />. inside the MapContainer. This however is not ideal because of the scattered route behaviour...
Is it possible in another way?
I used the portal way to solve my problem:
In my map-container, this is happening:
const [control, setControl] = useState(null);
const handleRef = useCallback((instance) => setControl(instance), [
setControl,
]);
...
<MapContainer ...>
...
<div className="mapcontrol-top-left" ref={handleRef}></div>
</MapContainer>
In a totally different component, where conditionally I want to show something on the Map, I do this (using Material-UI Portal & Fab component):
<Portal container={props.control}>
<Fab size="medium">
<EditIcon />
</Fab>
</Portal>
The material-ui Portal component is easy to use and adds convenience, but a native React Portal will also do the trick...
Hi I am developing a website using reactjs. Each page of the website has mainly 3 parts (1. header 2. body 3. footer) . So header and footer will be same for each page and body will keep on changing. Should I create header and footer components and then include them in each page of the website. Is this good design?
How can I highlight navigation menu option for a particular page. For example If I am on contactus page then ContactUs menu option should be highlighted. Similarly If I am one Home Page then "Home" should be highlighted.
In react apps you usually use a router library for this.
A router also takes care of the url in the address bar, so you can save and share links to sub pages in a single page application, and use the browser's back button.
The most popular router for react is called "React Router", but there are other alternatives. It's even possible to write your own router.
React-router's docs has examples of how you can implement this. For the highlighting effect, you can use the component called <NavLink />
Instead of including the header and footer in each page, you start from the outside in. You only put header and footer in once, typically in a main <App />, and then include variable page content inside <Route /> components.
yes you can create 2 components on the top level. they will be header and footer. for navigation; you can use react-router. it will be used to navigate between views. you can put the body component inside your header component your main App structure can be :-
<App>
<HeaderComp/>
<FooterComp/>
</App>
now you can set react-router to change the component being render in body place when any link in the header is clicked. you can also keep the state of currently active view and highlight its color when active.
in react-router v4 you can use switch and route to change between components
<Switch>
<Route exact path='/' component={YourComponent} />
<Route path='/secondcomponent' component={YourSecondComponent} />
<Route path='/thirdcomponent' component={YourthirdComponent} />
</Switch>
this will be your body component , other components like given above will be shown when you click on the link in the head that matches the path in Route tag.
now you header render can be like this.
render(){
return (
<div>
<TopBar/>
<BodyComp/>
<div/>
)
}
the topbar will be fixed and stay on top , the body will have all the space except the margin on top to adjust below the topbar
your topbar can be like this.
render(){
return(
<div className="topBarcontainer">
<Link to="/" >
<div className ="topBarItem">
Home
</div>
</Link>
<Link to="/secondComponent" >
<div className ="topBarItem">
secondComponent
</div>
</Link>
</div>
)
}
as for you want to highlight the current view , you can keep the state array and add give each Link the value from that array , and put onMouseDown on it , when it is clicked it will callback telling the value that is clicked and u will reset all the items background color to default , then you can set the style of that particular active item in your header to active color. you should use inline styling for that instead of className