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?
Related
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'm about to try to create a walkthrough for a web app created using React. I'm trying to think of the best way to do it, and have been thinking of using things like Material UI's modal component. I'm thinking I should also include some kind of arrow component that points the user to whichever element (button, link, etc) on my page I want them to click next. Also I will want to create a backdrop to fade the screen except for whichever element I want the users attention to be drawn to.
I feel like this must have been done many times before, but I can't find anything from searching. Obviously whenever I Google "react walkthrough/guide/intro" I just get suggestions for teaching basic React.
(NB: I'm not looking to do one of those intro sliders, as I want to provide a more detailed step-by-step)
The keyword your need to search for is 'tour'. Searching on google for 'react tour', I found 2 libraries for you:
React Joyride: https://github.com/gilbarbara/react-joyride | Live Demo
reactour: https://github.com/elrumordelaluz/reactour | Live Demo
Both seem to have similar features:
Instruction modal that explains about an element on the page.
The modal is positioned next to the highlighted element.
The window will scroll down to the highlighted element if it's outside of the viewport.
The element is highlighted to bring more attention while the rest of the page is in the backdrop.
There are steppers on the modal to indicate which step you're on.
Is there is any way to make Nav with nested links make always collapsible?
Right now I am having a huge array of INavLinkGroup[] with big amount of nested links so it looks bad when page is loaded.
Find a solution
In INavLinkGroup there is property: collapseByDefault?: boolean;
I'm building a React Native app which has a screen containing a list of several items the user can see. I wrapped up the elements by using a ScrollView component and it works fine as shown below:
However, I'd like to have the vertical scrollbar always visible just to let the user know he can see more items than the ones shown in the first place. I've read the ScrollView documentation but it seems that there is not an option to make it happen.
Does anyone know if there is a way to achieve that or perhaps a workaround to make it intuitive to the user that there is a scroll on the list?
Try this ,Its working for me
persistentScrollbar={true}
https://facebook.github.io/react-native/docs/scrollview#flashscrollindicators
The closest thing to showing the scroll indicator constantly that is available in React Native is flashing the indicator. You can obtain a reference to the scrollview and call the flashScrollIndicators() method. There is no known way to disable hiding the indicator without writing native code. If you want to go down that path, you could try something like this for iOS.
swipeable navigation
Whats the best approach to make link area swipeable left and right?
Ive failed to find ready to use component that allows to do that.
Ive tried to use React Touch SyntheticEvent and transform translateX to navigation bar, but failed with calculations. So question is what are the ways to achieve that and is there any react components that can help me to make this work?
Maybe you need to have a look at there.
Although it only supports element swipeable up and down, you can refer to the code of how the author implements element swipeable with translate3d.
The main idea of swiper is to calculate the position of the element, and when to start translation. You can record scrollHeight/scrollWidth and offsetHeight/offsetWidth when you start move event, and compare the value of them when the event is end. Then you know where is the element, and you can control the transform of the element as you want.
So far as I know, maybe Iscroll is a good solution for you.