Almost all sites consist of main structures called header, content, sidebar and footer. This article will discuss the placement of one of the footer in a react application. Before we start, let's take a look at what the bottom sticky footer is and our react app layout.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="1214437105"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## What is Sticky Footer

The sticky footer is the structure at the bottom of the screen if the height of the content is less than the height of the screen, otherwise at the bottom of all its content.

### Sticky Footer vs Fixed Footer

Do not mix the sticky footer up with a fixed footer, the fixed footer is always placed in the viewport even if the content height is taller than the viewport.

##  Our React Layout Structure For Placement The Footer

The layout structure is important for deciding which method to use to place the footer. Our react application layout has three main structures, header, content and footer. For simplicity's sake, each component will render its own name in a div container as in the example of code snippet below.



```js
import React from "react"
// Header        
export function Header() {
  return <div>Header</div>;
}
// Content
export function Content() {
  return <div>Content</div>;
}
// Footer
export function Footer() {
  // We need to add a className to place the footer
  return <div className="footer">Footer</div>;
}
// App.js
import "./App.css";
import Content from "./components/Content";
import Footer from "./components/Footer";
import Header from "./components/Header";

function App() {
  return (
    <div className="App">
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

export default App;
```

##   3 Ways to Place Sticky Footer in React

###  Using FlexBox 

Flexbox is a powerful way to place any element in an HTML document. You can easily place the footer using the flex column layout and margin-top: auto.



```css
html,
body,
#root {
  height: 100%;
}
.App {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.footer {
  margin-top: auto;
}
```

###  Using Grid 

The grid system is a great feature in CSS for creating complex structures. It can also be used to place a footer in a react application using the fragment size (1fr) for the content height and auto size for header and footer.


```css
html,
body,
#root {
  height: 100%;
}
.App {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
```

###  Using CSS calc() Method  

If you have a footer with a constant height value, the calc() method can be anohter option for placing a footer in a react application. In the following example, our footer height is 100px.


```css
.App {
  min-height: calc(100vh - 100px);
  position: relative;
}
.footer {
  position: absolute;
  bottom: -100px;
  height: 100px;
}
```

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Conclusion

In this article, we have covered the placement of a bottom sticky footer in a react application using different methods including the flexbox, grid and CSS calc method, you can choose a method according to your requirements and design layout.

Thank you for reading.

An example of how to create and place a sticky footer in react with flex, grid and calc method in CSS

large_sticky-footer.png

medium_sticky-footer.png

small_sticky-footer.png

thumbnail_sticky-footer.png

sticky-footer.png

Place A Sticky Footer In React Using 3 Ways

## INTRODUCTION

When a user right clicks in a browser, a default box appears with some actions such as copy and paste. However, in a React application, preventing the default right-click behavior and customizing it may be necessary.

So, In this article, we will discuss how to handle right-click events in React using the **onContextMenu** event.

## What is onContextMenu Event

The onContextMenu event is fired when the user right-clicks on an element or presses the context menu key on their keyboard. It is a built-in event in React that you can use to handle the right-click event.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
     
## How to Handle Right Click In React

To handle the right-click event, you need to attach the onContextMenu event to the element that you want to listen for the right-click event. You can then define a function to handle the right-click event and pass it as a prop to the element.

Let's look at an example of how to handle the right-click event in React:


```js
import React from 'react';

function MyComponent() {
  const handleContextMenu = (event) => {
    event.preventDefault(); // prevent default context menu from showing up
    console.log('Right-clicked!');
  };

  return (
    <div onContextMenu={handleContextMenu}>
      Right-click me!
    </div>
  );
}
```

In this example, we've created a function called handleContextMenu that logs a message to the console when the user right-clicks on the div element. We've then added the onContextMenu event to the div and passed in the handleContextMenu function as the event handler.

The event.preventDefault() method is used to prevent the default context menu from showing up when the user right-clicks on the element.

You can also pass additional data to the handleContextMenu function by using an arrow function as follows:


```js
import React from 'react';

function MyComponent() {
  const handleContextMenu = (event, data) => {
    event.preventDefault(); // prevent default context menu from showing up
    console.log('Right-clicked!', data);
  };

  return (
    <div onContextMenu={(e) => handleContextMenu(e, 'some data')}>
      Right-click me!
    </div>
  );
}
```
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6344386266"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

In addition to logging a message or passing data, you can also perform other actions when the user right-clicks on an element. For example, you could open a context menu, show a tooltip or display a modal window.



## Conclusion

In conclusion, handling a right-click event in React using the onContextMenu event is a simple and effective way to add interactivity to your web applications. By attaching the onContextMenu event to an element and defining a function to handle the event, you can perform a variety of actions when the user right-clicks on the element.

Thank you for reading.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="1214437105"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>


Handle right click events in your React application for displaying a React component 

How To Handle Right Click In React

Nested routes in React allow fragments to be injected into the page and changed URLs at the same time without completely redirecting the user to another page.


Static and dynamic nested routes are both possible in React. For instance, when dealing with a large number of users, it's impractical to create separate static routes for each one. Instead, you can establish a single route for dynamically changing URLs and injecting data into the page.

After this brief introduction, let's create the following example to see how both static and dynamic nested routes are implemented in a react application using react router v6.

## Install Required Routing Packages


```bash
npm i react-router react-router-dom
```

## Setting Routes

We will have three routes. One of them is parent <u>users</u>, other one is nested dynamic child route <u>users</u>, the last one is static <u>create</u>  route.

As seen the following code snippet, we have also three component for each route so we have imported the page components and call them as element.


```js
import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Users from "./components/Users";
import User from "./components/User";
import Create from "./components/Create";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users" element={<Users />}>
          {/* Dynamic Nested Route */}
          <Route path=":user" element={<User />} />
          {/* Static Nested Route */}
          <Route path="create" element={<Create />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;
```

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="1214437105"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
## Parent Route

In our parent users component, we will render all users. When one of them is clicked, the user will be injected to the page with the help of  Outlet component from the react-router package.


```js
import React from "react";
import { Link, Outlet } from "react-router-dom";

export default function Users() {
  const users = [
    { id: "1", name: "john" },
    { id: "2", name: "jane" },
  ];

  return (
    <div className="users">
      Users
      {/* List all users */}
      <div className="list">
        {users.map((user) => (
          <Link className="user" to={user.name} key={user.id}>
            {user.name}
          </Link>
        ))}
      </div>
      {/* When clicked a user, inject its data into here */}
      <Outlet></Outlet>
    </div>
  );
}
```

## Nested Dynamic Route

Our dynamic nested route component is User, which will dynamically display different usernames based on URL parameters. Using the useParams hook, you can get the username from the URL and display that name on the screen.



```
import React from "react";
import { useParams } from "react-router-dom";

function User() {
  const { user } = useParams();

  return <div>{user} is selected</div>;
}

export default User;
```

## Nested Static Route

We have a static route called create to create a new user. For the sake of simplicity we will just render a simple HTML form.



```js
import React from "react";

export default function Create() {
  return (
    <div>
      <h1>Create A User</h1>
      <input placeholder="A User Name" />
    </div>
  );
}
```

## Conclusion

That's all. In this guide, we talked about dynamic and static nested routes with react router v6, which enables creating of tab-based pages. After setting the routes, you can test the URLs by attempting navigatate the following routes.

Thank you for reading.

Implement nested routes in react with react router v6

nested-routes-react.gif

Nested Routes With React Router V6

You've probably seen the dark mode option on many websites, along with the light mode. This indicates that users prefer using it to reduce strain on their eyes or prefer it over the light theme. If you want to add dark mode option to your react application with Tailwind CSS, then you can follow the steps below.

## Add darkMode Property To Tailwind Config File

The first thing you need to do is to specify that you will switch the modes on your react js app adding the class attribute to the HTML tag, therefore set the class value to the 'darkMode' key in the Tailwind config file, as shown in the following code snippet:
 

```js
module.exports = {
  mode: "jit",
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: "class",
  theme: {},
  plugins: [],
}
```

## Design Your Components For The Dark Theme

To specify how the design will look in dark mode, you need to add new classes to elements with the dark: prefix. For example, the following code renders a full-screen page with a white background and black text in light mode and a black background with white text in dark mode.



```js
import "./App.css";
import { ToggleTheme } from "./ToogleTheme";

function App() {
  return (
    <div className="min-h-screen bg-white text-black dark:bg-black dark::text-white">
      {/* We will create this component in the next steps */}
      <ToggleTheme />
    </div>
  );
}

export default App;
```
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="9309141789"></ins>

## Create Toggle Switch Component

Most likely, you have seen a toggle switch button that allows users to switch between modes. Therefore, in this step, we will create a component for the switcher.

The list of classes for the switch component is quite long. Simply put, we made the default checkbox invisible and created a custom checkbox instead. We then added peer-prefixed classes that respond to the status of the checkbox


```js
import React, { useEffect, useState } from "react";

export function ToggleTheme() {

  // Code will place here to handle theme preference

  return (
    <label className="relative block w-11 h-6">
      <input
        onChange={toggleMode}
        type="checkbox"
        checked={isDark ? true : false}
        className="peer opacity-0"
      />
      <div
        className="absolute cursor-pointer left-0 
      top-0 bottom-0 right-0 bg-gray-200 rounded-3xl 
      before:absolute before:w-6 before:h-6 before:rounded-full 
      before:bg-yellow-200 peer-checked:before:translate-x-6 peer-checked:before:bg-black 
      before:transition-all duration-300"
      ></div>
    </label>
  );
}
```
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6344386266"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
     
## Handle User's Theme Preference

Using the onChange event listener for the checkbox input, we will set the theme based on the user's preference by adding the 'dark' or 'light' class to the HTML tag. We will also save the theme choice to local storage to set the theme again when the user reloads the page.

Here is the last version of the ToggleTheme Component with functions to handle theme preference and switch input.

```js
import React, { useEffect, useState } from "react";

export function ToggleTheme() {
  const [isDark, setIsDark] = useState(false);

  function setDark() {
    document.documentElement.classList.add("dark");
    document.documentElement.classList.remove("light");
    localStorage.setItem("theme", "dark");
    setIsDark(true);
  }

  function setLight() {
    document.documentElement.classList.add("light");
    document.documentElement.classList.remove("dark");
    localStorage.removeItem("theme");
    setIsDark(false);
  }

  function toggleMode() {
    if (isDark) {
      setLight();
    } else {
      setDark();
    }
  }

  // When the page is loaded or refreshed, check for theme preference
  useEffect(() => {
    if (localStorage.getItem("theme") == "dark") {
      setDark();
    } else {
      setLight();
    }
  }, []);

  return (
    <label className="relative block w-11 h-6">
      <input
        onChange={toggleMode}
        type="checkbox"
        checked={isDark ? true : false}
        className="peer opacity-0"
      />
      <div
        className="absolute cursor-pointer left-0 
      top-0 bottom-0 right-0 bg-gray-200 rounded-3xl 
      before:absolute before:w-6 before:h-6 before:rounded-full 
      before:bg-yellow-200 peer-checked:before:translate-x-6 peer-checked:before:bg-black 
      before:transition-all duration-300"
      ></div>
    </label>
  );
}
```

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Conclusion

That's all. We have covered dark theme implementation with tailwind css in a react application. Note that you need to add classes with dark: prefix to your HTML elements according to your dark mode design requirements, after you have completed the dark mode design, you can test the theme switching using the toggle checkbox.

Thank you for reading.

Add Dark Mode To Your React js Application With Tailwind CSS | Handle Theme Preference | Create Toggle Switch Component in React

small_react-dark-mode.png

thumbnail_react-dark-mode.png

react-dark-mode.png

React Dark Mode With Tailwind CSS

JSX is a syntax extension to JavaScript that allows us to write HTML-like code in our JavaScript files. One of the main benefits of JSX is that it allows us to write code that is both easier to read and write, while also making it more maintainable. In this article, we will discuss how to use conditional statements(if and if-else) and loops (javascript map) in JSX.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Conditional Statements in JSX

Conditional statements allow you to write code that only runs if a certain condition is met. In JSX, we can use the ternary operator or the if else statement to write conditional statements.

### Ternary Operator

The ternary operator is a shorthand way of writing an if-else statement. It takes three operands: a condition, a value if the condition is true and a value if the condition is false. Here is an example of using the ternary operator in JSX:

```js
const isTrue = true;

return (
  <div>
    {isTrue ? <p>This is true</p> : <p>This is false</p>}
  </div>
);
```

In the above code, we first declare a boolean variable called isTrue. We then use the ternary operator to conditionally render either a p element containing the text "This is true" or a p element containing the text "This is false".

### If-Else Statement

The if-else statement is a more verbose way of writing a conditional statement. It takes a condition and runs one block of code if the condition is true and another block of code if the condition is false. Here is an example of using the if-else statement in JSX:


```js
const isTrue = true;

if (isTrue) {
  return (
    <div>
      <p>This is true</p>
    </div>
  );
} else {
  return (
    <div>
      <p>This is false</p>
    </div>
  );
}
```

In the above code, we declare the same isTrue variable and use an if-else statement to conditionally render either a p element containing the text "This is true" or a p element containing the text "This is false".

## Loops in JSX

Loops allow you to iterate over a collection of items and perform some action on each item. In JSX, we can use the map function to create a new array of JSX elements based on the original array.

Here is an example of using the map function to render a list of items in JSX:

```js
const items = ["item 1", "item 2", "item 3"];

return (
  <ul>
    {items.map((item) => (
      <li>{item}</li>
    ))}
  </ul>
);
```

In the above code, we first declare an array of strings called items. We then use the map function to iterate over the items array and create a new array of li elements containing each item in the items array. We then render this array of li elements inside a ul element.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6344386266"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Conclusion

In this article, we have discussed how to use conditional statements and loops in JSX. Conditional statements allow you to write code that only runs if a certain condition is met, while loops allow you to iterate over a collection of items and perform some action on each item. 

Thank you for reading.

How to Use If-else and Loop In JSX

## INTRODUCTION


TypeScript is a typed superset of JavaScript that adds static typing and other features to the language. When working with React in TypeScript, it is important to define the types of the props that are passed down to child components.

In this article, we will explore how to define the type of children props in React with TypeScript. Let's get started.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

##  Type of Children Props

In React, children are a special type of prop that allow us to pass components, text or other content to a component. Children can be defined using the **props.children** property in a React component.

With TypeScript, we can define the type of children props using the **ReactNode** type. The ReactNode type is a union type that can represent any valid React node, including elements, text and other content.

Here's an example of how to define the type of children props in a TypeScript React component:

```js
type Props = {
  children: React.ReactNode;
};

const MyComponent: React.FC<Props> = ({ children }) => {
  return <div>{children}</div>;
};
```

In addition to defining the type of children props, we can also define the types of other props that are passed down to child components. For example, we can define the type of a prop called className that is used to specify the CSS class of an element:

```js
type Props = {
  children: React.ReactNode;
  className: string;
};

const MyComponent: React.FC<Props> = ({ children, className }) => {
  return <div className={className}>{children}</div>;
};
```

## ReactNode vs ReactElement

You have probably saw other type named ReactElement. Let's see differences between react node and  react  element.

ReactElement is another type in TypeScript that can be used to define the type of children props in React components. The ReactElement type is a more specific type than ReactNode and is used to represent a single React element (i.e. a component or HTML element) rather than a collection of nodes.

Also ReactElement type is only the type of output that functional components render, which means number, string etc. is not in the ReactElement type.


```js
type Props = {
  children: React.ReactElement |  ReactElement[]
};

const MyComponent: React.FC<Props> = ({ children }) => {
  return <div>{children}</div>;
};
```

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6344386266"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Conclusion

Defining the type of children props in React with TypeScript is an important step in ensuring that our components are type-safe and behave as expected. By using the React.ReactNode type, you can ensure that our components only accept valid React nodes as children.

Thank you for reading.

Type of children props in react with typescript | Reactjs Children Prop In Typescript

Place A Sticky Footer In React Using 3 Ways

React Dark Mode With Tailwind CSS

How To Handle Right Click In React

How to Use If-else and Loop In JSX

Nested Routes With React Router V6

Type of Children Props in React with TypeScript