I found this template of react sidebar which I have implemented successfully. However, I am stuck on how to load the content.
<SubMenu
title="Users"
icon={faBriefcase}
items={["Create", "List"]}
/>
How do I route the content I want to show when a menu item is selected? (either Create or List in the example above)
As React provides with Link Tags to Route.
Do it like this. Your items should be wrapped in a Link tag to route.
<SubMenu
title="Users"
icon={faBriefcase}
items={[
<Link to"path">"Create"</Link>,
<Link to"path">"List"</Link>
]}
/>
As per your comment you need something like this
<Layout>
<App/>
</Layout>
Whereas Layout is
const Layout = ({children}) => {
return(
<>
<Appbar />
<Sidebar />
<main>
{children} // your whole app renders here
</main>
</>
)
}
export default Layout;
You could add a .sidenavactive class to main tag that becomes active when side bar is opened so you adjust or push page content using .sidenavactive.
Now when you will change route in Sidebar items. Just the main content will change.
Related
I'm creating a portfolio website using React.
It is a single page website and each section of the website is its own separate component.
My navbar component has links at the top that when clicked I want the page to scroll to the corresponding section further down the page. A traditional About is not working. Do I need to use react-router-dom or am I just missing something?
const App = () => {
return (
<div className='app'>
<Navbar />
<Hero />
<About />
<Projects />
<Footer />
</div>
)
}
export default App
You can use the refs to scroll the page to a section . Refs in react have many applications , you can read details on react official page. Here is an example to use ref for scrolling
const Scroll = () => {
const scrollTo = useRef();
return (
<div>
<button onClick = {()=>{scrollTo.current.scrollIntoView()}></button>
.
.
// Your Other divs
.
.
<div ref={scrollTo}>Scrolled</div>
</div>
);
}
You can use the window.scroll() for scrolling page to a coordinate
window.scroll({top:600,left:50,behavior:'smooth'})
Don't know what I was doing wrong but as Drew suggested in his answer, the classic <a> tag does work as expected.
Go forth and use those tags fellow React devs!
So I have a transparent navbar background on my home page, but I need it to change background color when I navigate to my services page to #000.
I figured out how to change the page background with helmet, but I don't understand how I would target the navbar and change the color since I am using a layout component that renders on every page.
const Layout = ({ children }) => {
return (
<>
<Helmet bodyAttributes={{ class: "image-page" }} />
<Navbar />
<main>{children}</main>
<Footer />
</>
)
}
You need to get the location from the default's Gatsby's props to make your checks.
Inside your <Navbar> component, you will need to get the location via props and add a class name to it if it matches your services page. It should look like:
const Navbar= ({ location }) => {
return <div className={`${location.pathname === /services/} ? 'whiteClassName': 'regularClassName'`}>Your navbar content</div>
}
In the same way that you destructurate children in the <Layout> component, you can do exactly the same with location. Since it's a default prop, it will be available everywhere. Once you have your current location, you only need to add a custom class if it fits a condition to your element and make your CSS magic.
I am new in react and I am searching the best way for creating a reusable header.
The goals is to reuse a header component in multiple apps by passing somes properties such as:
- Main Title
- Logo
- String List of menus and route paths for render multiple buttons menus for the navigation
- And a boolean for a last button menus for administration
Finally the signature exemple of the component would be something like:
<Header title="title" menus_json=[{'title':'tab1', 'route_path'='/tab1'},...] logo_path=[] admin=False />
How can we achieve that ? Any suggestion, documentation for that ?
You can create a Header component and pass dynamically to every component where needed by values.
Header.js
function Header({title,menus_json,logo_path,admin}){
return (
<header>
// use your title,menus_json,logo_path,admin
</header>
)
}
Use like this in needed components - example
Component1.js
function Component1(){
return (
<div>
<Header title="title" logo_path=[] admin=False
menus_json=[{'title':'tab1', 'route_path'='/tab1'}] />
<div>...</div>
</div>
)
}
Component2.js with different values title,menus_json...etc.
function Component2(){
return (
<div>
<Header title="title2" logo_path=[] admin=False
menus_json=[{'title':'tab2', 'route_path'='/tab2'}] />
<div>...</div>
</div>
)
}
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
I have a container component with a modal in it that is opened and closed based on a state property.
I want to control this via the URL, i.e. I want to have
/projects - the modal is NOT open
/projects/add - the modal IS open
As well as being able to link directly to it, I want the URL to change when I click on links within the main container to open the modal.
Can someone explain how I could do this, or point me in the right direction of a good tutorial?
NOTE: This way is not perfect. Even more it's rather antipattern than pattern. The reason I publish it here is it works fine for me and I like the way I can add modals (I can add modal to any page and in general their components don't depends on the other app in any way. And I keep nice url's instead of ugly ?modal=login-form). But be ready to get problems before you find everything working. Think twice!
Let's consider you want following url's:
/users to show <Users /> component
/users/login to show <Users /> component and <Login /> modal over it
You want Login to not depend on Users in anyway, say adding login modal to other pages without pain.
Let's consider you have kinda root component which stands on top of other components. For example Users render may look something like this:
render() {
return (
<Layout>
<UsersList />
</Layout>
);
}
And Layout's render may look something like this:
render() {
return (
<div className="page-wrapper">
<Header />
<Content>
{this.props.children}
</Content>
<Footer />
</div>
);
}
The trick is to force modal's injection to <Layout /> every time we need it.
The most simple approach is to use flux for it. I'm using redux and have ui reducer for such page meta-information, you can create ui store if you use other flux implementation. Anyway, final goal is to render modal if <Layout />'s state (or even better props) contains modal equal to some string representing modal name. Something like:
render() {
return (
<div className="page-wrapper">
<Header />
<Content>
{this.props.children}
</Content>
{this.props.modal ?
<Modal key={this.props.modal} /> :
null
}
<Footer />
</div>
);
}
<Modal /> returns modal component depends on given key (In case of our login-form key we want to receive <Login /> component).
Okay, let's go to router. Consider following code snippet.
const modal = (key) => {
return class extends React.Component {
static displayName = "ModalWrapper";
componentWillMount() {
// this is redux code that adds modal to ui store. Replace it with your's flux
store.dispatch(uiActions.setModal(key));
}
componentWillUnmount() {
store.dispatch(uiActions.unsetModal());
}
render() {
return (
<div className="Next">{this.props.children}</div>
);
}
}
};
...
<Route path="users" component={Next}>
<IndexRoute component={Users}>
<Route path="login" component={modal('login-form')}>
<IndexRoute component={Users} />
</Route>
</Route>
(Don't care about Next - I add it here for simplicity. Imagine it just renders this.props.children)
modal() function returns react component that triggers change in ui store. So as soon as router gets /users/login it adds login-form to ui store, <Layout /> get it as prop (or state) and renders <Modal /> which renders corresponding for given key modal.
To programmatically assess to a new URL, pass the router to your component and use push. push for example will be call in the callback trigger by the user action.
When setting your router set a route to /projects/:status. then, in your component route, you can read the value of status using this.props.param.status. Read "whats-it-look-lik" from react-router for an example.