jscottsmith/react-scroll-parallax

Parallax seems to be not working with RouterProvider from 'react-router-dom' - bug

shubam-itilite opened this issue · 1 comments

Bug

			{/* <ParallaxProvider>
				<DashboardL3Parallax />
			</ParallaxProvider> */}

			<RouterProvider router={router} />

here const router = createBrowserRouter([

	{
						path: URLs.dashboard.l2 + '/l3',
						element: (
							<ParallaxProvider>
								<DashboardL3Parallax />
							</ParallaxProvider>
						),
					
	}]
	
	If i uncomment the code the parallax is working fine becuase it is outside the RouterProvider 
	
	and the one inside the route just doesnt work just renders normal div
	
	const DashboardL3Parallax = () => (
<div>
	<Parallax speed={-10}>
		<h1>Byeee</h1>
		<h1>Byeee</h1>
		<h1>Byeee</h1>
		<h1>Byeee</h1>
		<h1>Byeee</h1>
		<h1>Byeee</h1>

		<h1>Byeee</h1>
		<h1>Byeee</h1>
		<h1>Byeee</h1>
		<h1>Byeee</h1>
		<h1>Byeee</h1>
		<h1>Byeee</h1>
		<h1>Byeee</h1>
	</Parallax>
	<Parallax speed={5}>
		<h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1>{" "}
		<h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1>{" "}
		<h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1>{" "}
		<h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1>{" "}
		<h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1>
		<h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1>{" "}
		<h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1>
		<h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1> <h1>Hello</h1>
	</Parallax>
</div>

);

You'll need to provide a repo or CodeSandbox reproducing the issue for me to provide any help.