Forem: Utsav Mavani

React.js Page Transition With Framer-Motion layout .

Utsav Mavani — Fri, 02 Feb 2024 04:31:13 +0000

Certainly! To implement page transitions in a React.js application using Framer Motion, you can follow these steps. I'll provide a simple example using Framer Motion's motion and AnimatePresence components for page transitions.

npm install framer-motion react-router-dom

Create a layout component that will handle the page transitions. Let's call it Layout.js:

// Layout.js
import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useLocation } from 'react-router-dom';

const Layout = ({ children }) => {
  const location = useLocation();

  return (
    <AnimatePresence exitBeforeEnter>
      <motion.div
        key={location.pathname}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
};

export default Layout;

In this component, we are using AnimatePresence to handle page transitions. The key attribute ensures that Framer Motion animates when the page changes.

Set up your main App.js file using React Router and the Layout component:

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Layout from './Layout';
import Home from './Home'; // Create your Home component
import About from './About'; // Create your About component

const App = () => {
  return (
    <Router>
      <Layout>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch>
      </Layout>
    </Router>
  );
};

export default App;

Replace Home and About with your actual page components.

Now, you can create your page components, such as Home.js and About.js. For example:

// Home.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page!</p>
    </div>
  );
};

export default Home;

Now, when you navigate between the home and about pages, Framer Motion will handle the page transitions with a fade effect. Customize the animations and transitions based on your specific needs

Fade and scale transition:

// Layout.js
import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useLocation } from 'react-router-dom';

const Layout = ({ children }) => {
  const location = useLocation();

  return (
    <AnimatePresence exitBeforeEnter>
      <motion.div
        key={location.pathname}
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0.8 }}
        transition={{ duration: 0.5 }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
};

export default Layout;

Javascript scroll snippets

Utsav Mavani — Fri, 19 Jan 2024 16:14:26 +0000

Scroll to Top

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

Usage:

scrollToTop();

Scroll to Element Smoothly

function scrollToElement(element) {
  element.scrollIntoView({ behavior: 'smooth' });
}

Usage:

const myElement = document.getElementById('myElement');
scrollToElement(myElement);

Load More button in a React.js

Utsav Mavani — Fri, 19 Jan 2024 16:08:33 +0000

To implement a "Load More" button in a React.js application, you typically fetch additional data from an API or another data source when the button is clicked. Here's a basic example using the useState hook to manage the state of the displayed data and a counter to keep track of how many items to display.

Assuming you have an array of data and want to display a certain number of items initially, then load more when the button is clicked, you can follow these steps:

Set up your component with state and a handler for the "Load More" button:

import React, { useState } from 'react';

const YourComponent = () => {
  // Your initial data
  const initialData = [
    // ... your data array
  ];

  // State to manage displayed data and load more button
  const [displayedData, setDisplayedData] = useState(initialData);
  const [visibleItemCount, setVisibleItemCount] = useState(5); // Change this as needed

  // Handler for the "Load More" button
  const handleLoadMore = () => {
    // Increase the visible item count (you can adjust this logic based on your requirements)
    setVisibleItemCount(prevCount => prevCount + 5);

    // Update displayedData with additional items
    setDisplayedData(initialData.slice(0, visibleItemCount + 5));
  };

  return (
    <div>
      {displayedData.map((item, index) => (
        // Render your data items here
        <div key={index}>{item}</div>
      ))}
      <button onClick={handleLoadMore}>Load More</button>
    </div>
  );
};

export default YourComponent;

Customize the logic inside the handleLoadMore function based on your specific requirements. This example assumes a simple approach of increasing the visible item count and updating the displayed data accordingly.

Keep in mind that this is a basic example, and you might need to adapt it based on the structure of your data and the way you fetch additional items (e.g., from an API). If you're fetching data asynchronously, you might use useEffect and an asynchronous function within handleLoadMore to fetch and update the data.

Tab logic using ReactJS

Utsav Mavani — Fri, 19 Jan 2024 16:00:58 +0000

how you can implement a simple tab logic using ReactJS. In this example, I'll use functional components and hooks. Let's create a component called Tabs:

import React, { useState } from 'react';
import './Tabs.css'; // Import your CSS file for styling

const Tabs = () => {
  const tabs = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'];
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

  return (
    <div className="tabs-container">
      <div className="left-side">
        <h2>{tabs[activeTab]}</h2>
      </div>
      <div className="right-side">
        {tabs.map((tab, index) => (
          <div
            key={index}
            className={`tab ${activeTab === index ? 'active' : ''}`}
            onClick={() => handleTabClick(index)}
          >
            {tab}
          </div>
        ))}
      </div>
      <div className="content">
        {/* Render content based on active tab */}
        <div className={`tab-content ${activeTab === 0 ? 'active' : ''}`}>
          Content for Tab 1
        </div>
        <div className={`tab-content ${activeTab === 1 ? 'active' : ''}`}>
          Content for Tab 2
        </div>
        <div className={`tab-content ${activeTab === 2 ? 'active' : ''}`}>
          Content for Tab 3
        </div>
        <div className={`tab-content ${activeTab === 3 ? 'active' : ''}`}>
          Content for Tab 4
        </div>
      </div>
    </div>
  );
};

export default Tabs;

In this example, we have a Tabs component with an array of tab titles (tabs) and a state variable (activeTab) to keep track of the currently active tab. The handleTabClick function is used to update the active tab when a tab is clicked.

Make sure to create a CSS file (e.g., Tabs.css) to style your tabs:

.tabs-container {
  display: flex;
  width: 100%;
}

.left-side {
  flex: 1;
}

.right-side {
  display: flex;
}

.tab {
  padding: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  margin-right: 5px;
}

.tab.active {
  background-color: #ddd;
}

.content {
  width: 100%;
  margin-top: 10px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}