I have started playing a bit with Shopify Polaris, in particular, the Frame layout:
https://polaris.shopify.com/components/structure/frame
What is not clear to me is that in the example provided by Shopify the sidebar, when an item is clicked, always toggles the toggleIsLoading method, and then it eventually always renders the actualPageMarkup component.
However, I would like to have a sidebar menu containing n different items. For each of them, I would like to render a particular component associated with the selection. How can I achieve this?
Ideally, I would like to always display the sidebar and the header, no matter what the component is.
I understand this question is not strictly related to Shopify Polaris or Next.js, however, I consider myself a newbie in both React and Next.js.
Related
Objective
My goal is to have an AppBar at the top of the page that has a title in it. Then in the "Main" area of my screen I will have a route that renders a different component depending on the url. These are the components that need to update the page title that is being rendered in the AppBar. I only want the AppBar to re-render and nothing else, because it's the only thing that will have actual data change in.
Originally I was using useState() and just prop drilling the [pageTitle, setPageTitle] down to the components. From what I've read, you should avoid prop drilling if possible.
So I've tried leveraging useContext() but everything in the tree still re-renders.
Caveats
I would like to keep the layout of the HTML like I currently have it if possible. I'm not sure if that affects anything.
How I Tested For Re-rendering
I have console.log() statements per component. I got rid of strict mode in order to make sure the components are rendering only once. I tested this prior to leveraging useContext and the statements only print out once.
Now when I click on a navigation link you will notice it prints out a console.log() for all of the components that <PageTitleContext.Provider> is wrapping.
I only want the <AppBar> to re-render and nothing else, because this is the only component that is displaying the pageTitle.
Sandbox Code
https://codesandbox.io/s/appbar-page-title-update-m5y9el?file=/src/pages/Dashboard.jsx
I'm currently working on a project with Nextjs and Prismic
From Prismic, I'm fetching an array of slices, which includes the navigation slice and the section slices.
I'd like to implement a full-width horizontal nav bar that starts halfway down the page, sticks to the top and automatically updates to show which section is the currently 'active' section.
Here is an example of what I mean: https://getbootstrap.com/docs/4.0/components/scrollspy/
I've built the nav bar and made it stick to the top, but am now struggling to update it with the active section.
Because each of the sections are slices, it's not possible for me use the useRef hook and get the 'ref' out of the slice and up to the page level.
An alternative I've considered is using querySelectors at the page level and using the onscroll event handler to update the class of the 'active' section. It feels a little bit hacky and I'm a little unsure of exactly how to implement it, but it's the only solution I can think of.
Could anyone please help with this?
I'm looking to use the React Transition Group library to animate some stuff in my React page. According to those docs, the TransitionGroup component does the following:
The <TransitionGroup> component manages a set of transition components
( and <CSSTransition>) in a list. Like with the transition
components, <TransitionGroup> is a state machine for managing the
mounting and unmounting of components over time.
Consider the example below. As items are removed or added to the
TodoList the in prop is toggled automatically by the
<TransitionGroup>.
I'm not really sure what that means or why it's important.
Also, when I modify the example code that they embed on the documentation page so that the <TransitionGroup> tags are replaced with <ul> tags everything seems to work just fine (I can remove todo items by clicking on them, I can add new todo items).
Why is <TransitionGroup> component necessary? What does it do? (And why do things appear to work just fine when I replace it with an unordered list?)
React Transition Group has some advantages over typical css animations.These are some points that are coming to my mind.
Its uses binding to change classes for a components. eg: enter, appear, enter-active, appear-active, exit, exit-active etc are all part of animation classes. This make it really interactive interms of rich animations which you can not achive otherwise.
It has advatage to unmount your component using javascript, once animation is done. So basically no extra load on your front end.
It gives your freedom to define animations which ever way you like. Either css classes or defineing your own styles with in js file.
It gives you various type of animation options. Eg: Switch Transitions, Transition Groups, CssTransitions etc.
I would suggest to keep experimenting with typical css animations and react transition group and come to your own conclusion.
I would like to achieve a behavior such as this:
https://developer.android.com/training/animation/videos/layout-transition.gif
I want to have an image in one component (e.g. product card), and when i'm clicking on that component, it will switch route (e.g. product page) but will keep the same component just resize it to be bigger.
Is it possible using React DOM?
Thanks!
My overall goal is something like this for the main overarching layout component:
Live example of my goal: https://app.mobalytics.gg/
Where there is a persistent 'sticky' top bar and side bar at all stages of the application. And then from that point on I use my router to modify the white portion of the screenshot with whatever component / functionality I want the user to experience.
However I am unfortunately struggling to get this to work at all. Various attempts have resulted in navbar overlapping the sidebar and then others the sidebar overlapping the navbar, some attempts crushed the sidebar to basically be only as long as the navbar. Tried using grids and then that crushed the "white portion" when I added components through the router and a few other non-solutions sadly...
How would someone achieve this with semantic-ui-react?
Other answers I've looked at and tried to no success sadly:
1: Separating Top Nav bar and Side nav bar
2: Sidebar + Fixed Top Menu in Semantic-UI React
3: semantic-ui-react fixed sidebar and navbar: can't get sidebar and content to scroll nicely