Comments (6)
Fixed with the released version 1.1.7
from hookrouter.
I hadn't had a chance to look at this again until just now, but thanks for the quick fix! I pulled down 1.1.7 and confirmed that it is fixed.
This functionality makes animated transitions between pages almost effortless! This is the full code (besides the CSS) to animate in and out.
const PageRoot = (props) => {
const {
title, children, classes, theme,
} = props;
const [className, setClassName] = useState(classes.incoming);
const [nextPath, confirmNavigation] = useControlledInterceptor();
useEffect(() => {
if (!nextPath) {
return;
}
setClassName(classes.out);
setTimeout(confirmNavigation, theme.transitions.duration.short);
}, [nextPath, classes, confirmNavigation, theme]);
useEffect(() => {
setTimeout(() => setClassName(classNames(classes.incoming, classes.in), 1));
}, []);
return (
<main className={classes.root}>
<Header Icon={props.headerIcon}>{props.headerContent || title}</Header>
<div className={classNames(classes.mainContent, className)}>
{children}
</div>
</main>
);
};
This is a huge win for this library, and the good work here is much appreciated! Feel free to lift that code and add to the docs, or if there's a spot you'd like to see them I can put in a PR as well.
from hookrouter.
Do you happen to have a codesandbox or something to demonstrate the behavior? Otherwise I would need to recreate the bug, first to find the cause.
from hookrouter.
Nevermind, I was able to recreate it. I will investigate.
from hookrouter.
Thats a very creative use of the controlled interceptor :D
You could even make that functionality a new hook like useTransition()
and pass the in- and out-classnames as well as the duration as arguments!
from hookrouter.
That's a great idea! I've done that, just passed in my classes hash and kept the names the same. Makes the PageRoot component much simpler and I can reuse the logic in other places and test in isolation.
One note for anyone who wants to try this - the one issue I ran into is on pages that have parameters and can be loaded twice consecutively, it transitions away, but then the transition back in doesn't happen because the transition in effect only runs on mount. My fix was to add a key of window.location.pathname
to the transitioning component where it's rendered by components with parameters. I also tested adding window.location.pathname
to the effect that causes it to transition in, but that causes the animation to run in reverse (from out state back to in state rather than from initial to in).
Thanks again for your help @Paratron. I did notice one thing that might wind up being a bug for someone later - nextPath
doesn't reset after calling confirmNavigation
which means you can't explicitly run logic post-confirm in hook world (besides tracking confirm in a separate state field in the consumer). Changing that might require some extra code to gate intercepting the empty nextPath
so not sure if you'd want that or not.
🥂
from hookrouter.
Related Issues (20)
- Native Typescript HOT 1
- Rendering Issue HOT 3
- BUG: query string is wiped out when navigate() is called with path only
- Direct navigation doesn't seem to work with GH Pages HOT 1
- Typescript error: index.d.ts file is missing HOT 8
- Support React 17 HOT 2
- Problem when using ListItem Material ui HOT 2
- React components using useRef hook break
- component rendering issue with react.strictmode HOT 1
- inside setLinkProps preventDefault sometimes does not stop navigation
- navigate() does not keep queryparameter even with fourth argument set to false HOT 3
- Import returning error "is not a module" when try to use hookrouter with CRA + typescript HOT 2
- TypeError: match is not a function
- Function to get the matched route outside of React (SSR)
- Navigate doesn't refresh useRoutes HOT 3
- Using Material UI Sidebar
- routing clears parent app state, how to maintain state while using this module?
- use hookrouter with react-redux
- Mark repo as archived if no longer updating 😄 HOT 3
- Application won't deploy on Heroku due to hookrouter HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hookrouter.