I am fairly new to React and struggling with implementing a sidebar that is dynamic to each page and has animations that shouldn't stop the navigation of the app's core content.
Below is the root of the app.
<Router>
<div className="app-container">
<LeftSidebar sidebarState={ this.state.sidebar.left } />
<RightSidebar sidebarState={ this.state.sidebar.right } />
<div
style={{
marginLeft: (this.state.sidebar.left.open ? this.state.sidebar.left.width : 0),
marginRight: (this.state.sidebar.right.open ? this.state.sidebar.right.width : 0)
}}
className='app-content'>
<Toolbar toggleSidebar={ this.toggleSidebar } />
<Switch>
<Route exact path="/" component={ Dashboard } />
<Redirect from="/dashboard" to="/" />
<Route path="/gear" render={ (props) => <Gear {...props} toggleSidebar={ this.toggleSidebar } /> } />
<Route component={ PageNotFound } />
</Switch>
</div>
</div>
</Router>
Sidebars at the top, absolute positioned left and right. (These are set to translate -100% and 100% to animate in and out, with an app-content moving margin with the same transition)
The app-content div contains the main content, which is the active component.
I'm working on the /gear component and I'm adding a sidebar to edit an item, though I'd like to have the sidebar available since I will more than likely use it in the other views.
To try and solve this problem I made a new component for gear sidebar (and would make other sidebar components as needed) and moved it into the gear component which then used a portal to move it to the body so it would style correctly. Then I'd toggle it by passing a toggleSidebar function which just flips a boolean in the state for the given side. This kinda worked but when navigating between pages I tried to have a ReactCSSTransitionGroup but I don't want to main content to wait for the timeout since it can happen as the new component is loaded.
So since I need the sidebar to be loaded and animating closing if open while the component it's connected to is unmounting, it'd only make sense to move it to the parent.
The only problem is, how do I load a dynamically passed component in the sidebar, then easier to solve wait for a timeout before its loaded so the animation can occur.
I was thinking of passing a function to the component that is being navigated to which can be executed to pass a component to render in the sidebar. It'd need to be a component since it will need still need to have methods etc. attached to it.
Otherwise, I thought using a router might work, but I'm not sure if you can timeout (if open) when they are unmounted to prevent it being moved to the other route.
Finally, the only way I get it to work at the moment is if I verbosely define sidebars and mount them dependent on the route, basically making a custom react-router.
Really struggling with this, any helps appreciated.
Related
I have two components like this.
<ComponentA />
<ComponentB />
Where component A will be horizontally scrollable but i want to show its scrollbar in component B.
<ComponentA >
some content over here which is wide enough to get horizontal scroll
</ComponentA>
<ComponentB>
some content
//scrollbar of ComponentA
more content
</ComponentB>
Hope i made the problem clear :)
I guess i can use useRef but don't know how in this scenario
I am newbie i hope i understand your question and i try my best.
use overflow-x/overflow-y: scroll;
so you can easily get a scrollbar in component A, but this will always visible.
As per title, I would like to hide the header of a parent stack navigator from a children component, this is because there are certain screens where I would like to keep the parent header and some screens where I would not.
I'm aware that one could simply set the header property to null in the parent Stack Navigator but is there any way I could change that property from a children component, during runtime?
Here's the hierarchy of the navigators:
ParentStackNavigator
|
|__TabNavigator
|__Other Screen
|__MainScreen (Stack Navigator)
|
|__ScreenWithHeader
|__ScreenWithoutHeader
The challenge is to hide the header in ParentStackNavigator when I'm in ScreenWithoutHeader but not when I'm in ScreenWithHeader. One solution that I could think of is to wrap the entire thing with a context but I'm hopeful that there's a better way.
If you want to hide header in a stack-navigator you must do this:
<Stack.Navigator screenOptions={{headerShown: false}}>
And if you want to hide heade in one screen only you have to do like this:
<Stack.Screen name={screens.Home} component={Home} options={{headerShown: false}} />
I want to implement smooth scrolling behaviouur on my html page, which is build of react components. Each component has a height of 100vh. I have seen many smooth scrolling tutorials and blogs which involves smooth scroll with the help of navbar tags or some anchor tags. I dont want to use any sort of anchor tag.
My question is how can I smooth scroll between components of my page using scrollbar. i.e if someone scrolls down, the page must smooth scroll to next component instead of hanging in between components and so on.
These are my components
render() {
console.log(this.props);
if(this.props.HomeHeroSec)
{
return (
<div className={classes.containerclass}>
<HomeSec1 className={classes.section} herodata={this.props.HomeHeroSec} />
<HomeSec3 className={classes.section} cradata={this.props.HomeCrausal} />
<AboutSec6 className={classes.section}/>
<HomeSec4 className={classes.section} secData={this.props.HomeHeroSec} />
<Footer />
</div>
)
}
react-scroll package may help you to have a smooth scroll. https://www.npmjs.com/package/react-scroll
I have a screen with 10 charts (using recharts.org) -- when clicking on a chart I want to switch the route from http://localhost:3000/charts to http://localhost:3000/charts/first and simply have the first chart shown full screen, but without it being re-rendered since no data will change whatsoever.
Any advice on how I may achieve this?
The only way to do that (at least in my previous experiences) would be to have the chart on the same level as the Route (with some conditionals...), if you don't need it on top you can change the route place ... the thing is that it doesn't give much flexibility for grid/flex but it works :P (in my case I had the selected graph always on top so it was perfect fit, you may try some conditional styling based on the location but I am afraid it would rerender)
<Route path="/charts" >
{history.pathname === '/charts/first' && <Chart data ..../>}
{history.pathname === '/charts/second' && <Chart data ..../>}
<Route path="/charts/first" >
<h1> Up you have the unRendered graph </h1>
</Route>
</Route>
*
Chart is a wrapper of any rechart graph(bar, pie ...) and has the REACT MEMO IMPLEMENTED
*
I spent days with this issue if you need more help just comment here
I am attempting to implement a responsive app with antd.
One of the things I have is a Sider menu as my main navigation. One of the things I would like to do is that on small screens this sider be collapsed (as the hamburguer icon preferrably). I have no idea how to even start this. My component with the sidebar looks something like this:
class App extends React.Component {
render() {
return (
<Layout>
<Sider width={200} collapsedWidth={500}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</Menu>
</Sider>
</Layout>
);
}
}
I should probably also point out that from the Layout docs, the following is said:
Note: You can get a responsive layout by setting breakpoint, the Sider will collapse to the width of collapsedWidth when window width is below the breakpoint. And a special trigger will appear if the collapsedWidth is set to 0.
However I could not get this to work. Perhaps I misunderstand it.
Unfortunately I am not able to embed my sample app in the editor here, so I here is my working sample app. All I would like to do is collapse my Sider navbar into a hamburguer icon or even an arrow like icon on small screens. Where do I go from here?
You have a collapsible sider official example.
From here you can choose whatever width \ icons you need based on state.
Also, you have a good example of antd components, especially a sidebar with the hamburger icon.