> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nk-o/jarallax/llms.txt
> Use this file to discover all available pages before exploring further.
# React & Next.js
> Integrate Jarallax parallax effects into React and Next.js applications
Jarallax can be seamlessly integrated into React and Next.js applications using custom wrapper components. This guide shows you how to build reusable components and handle server-side rendering.
## Installation
First, install Jarallax in your React or Next.js project:
```bash theme={null}
npm install jarallax
```
## React Component Setup
Create reusable React components for Jarallax functionality:
Build a wrapper component that manages the parallax lifecycle:
```jsx components/Jarallax.js theme={null}
import React, { useRef, useEffect } from 'react';
import { jarallax, jarallaxVideo } from 'jarallax';
import 'jarallax/dist/jarallax.min.css';
// Optional video extension
jarallaxVideo();
export default function Jarallax({ className = '', children, ...props }) {
const $el = useRef();
// Init Jarallax
useEffect(() => {
if ($el.current) {
jarallax($el.current, props);
}
// Destroy Jarallax on cleanup
return function destroy() {
if ($el.current) {
jarallax($el.current, 'destroy');
}
};
}, []);
// Update options when props change
useEffect(() => {
if ($el.current) {
jarallax($el.current, 'destroy');
jarallax($el.current, props);
}
}, [props]);
return (
{children}
);
}
```
This component properly handles initialization, cleanup, and prop updates to prevent memory leaks.
Create a simple component for parallax images:
```jsx components/JarallaxImage.js theme={null}
export default function JarallaxImage({ className = '', ...props }) {
return ;
}
```
Import and use the components in your React app:
```jsx App.js theme={null}
import Jarallax from './components/Jarallax';
import JarallaxImage from './components/JarallaxImage';
function App() {
return (
Your Content Here
);
}
```
## Next.js Integration
Next.js requires special handling due to server-side rendering (SSR). Jarallax needs to run only on the client side.
### Basic Next.js Setup
Here's how to integrate Jarallax in a Next.js application:
```jsx pages/index.js theme={null}
import Head from 'next/head';
import dynamic from 'next/dynamic';
// Disable SSR for Jarallax component
const Jarallax = dynamic(() => import('../components/Jarallax'), { ssr: false });
import JarallaxImage from '../components/JarallaxImage';
export default function Index() {
return (
<>
Next.js Parallax Example
Next.js Example
);
}
```
Always use `dynamic` import with `{ ssr: false }` for the Jarallax component to prevent server-side rendering issues.
### App Router Setup (Next.js 13+)
For Next.js App Router, mark your component as a Client Component:
```jsx components/Jarallax.js theme={null}
'use client';
import React, { useRef, useEffect } from 'react';
import { jarallax, jarallaxVideo } from 'jarallax';
import 'jarallax/dist/jarallax.min.css';
jarallaxVideo();
export default function Jarallax({ className = '', children, ...props }) {
const $el = useRef();
useEffect(() => {
if ($el.current) {
jarallax($el.current, props);
}
return function destroy() {
if ($el.current) {
jarallax($el.current, 'destroy');
}
};
}, []);
useEffect(() => {
if ($el.current) {
jarallax($el.current, 'destroy');
jarallax($el.current, props);
}
}, [props]);
return (
{children}
);
}
```
## Advanced Next.js Example
Here's a complete example with dynamic state management and interactive controls:
```jsx pages/index.js theme={null}
import React, { useState } from 'react';
import Head from 'next/head';
import dynamic from 'next/dynamic';
const Jarallax = dynamic(() => import('../components/Jarallax'), { ssr: false });
import JarallaxImage from '../components/JarallaxImage';
export default function Index() {
const [blocks, updateBlocks] = useState([
{
uid: 1,
options: {
type: 'scroll',
src: 'https://source.unsplash.com/random/1280x720',
speed: 0.6,
},
},
]);
function addNewBlock() {
const randomImage = `https://source.unsplash.com/random/1280x72${blocks.length % 10}`;
let uid = 1;
if (blocks[blocks.length - 1]) {
uid = blocks[blocks.length - 1].uid + 1;
}
updateBlocks([
...blocks,
{
uid: uid,
options: {
type: 'scroll',
src: randomImage,
speed: 0.6,
},
},
]);
}
function removeBlock(id) {
updateBlocks(
blocks.filter((data, i) => {
return id !== i;
})
);
}
function changeBlockOptions(id, newOptions) {
updateBlocks(
blocks.map((data, i) => {
if (id === i) {
return {
...data,
options: {
...data.options,
...newOptions,
},
};
}
return data;
})
);
}
return (
<>
Next.js Advanced Example
);
}
```
This advanced example demonstrates how to dynamically add, remove, and update parallax blocks with different configurations in real-time.
## Common Props
The Jarallax component accepts all standard Jarallax options as props:
```jsx theme={null}
console.log('Initialized')}
onDestroy={() => console.log('Destroyed')}
onScroll={(calculations) => console.log(calculations)}
>
{/* Your content */}
```
## Video Backgrounds in React
Enable video backgrounds by ensuring the video extension is initialized:
```jsx YouTube Video theme={null}