ReactJS useOrientation Custom Hook
Last Updated :
29 Jul, 2024
React useOrientation Custom Hook is a powerful tool for building responsive layouts in React applications. It allows developers to easily detect the current screen orientation of a device, which can then be used to adjust the layout of a component based on whether the device is in portrait or landscape mode. The useOrientation hook is a custom hook exported by the react-use library and can be imported and used in any functional component. It allows you to create designs that adapt to the device's screen size and orientation, providing a better user experience. For example, you can change the layout of your navigation bar based on whether the device is in landscape or portrait mode, create a game that responds to the device's orientation, and changes the gameplay accordingly. Or, you can choose to display photos in portrait or landscape mode, depending on how the device is oriented.
Syntax:
const {angle,type} = useOrientation();
Parameters:
The useOrientation hook does not take any parameters, and it returns an object that contains several properties related to the device's screen orientation.
- angle: The angle variable will have the degree of rotation of the device, which ranges from 0 to 360.
- type: type variable will have the device's current screen orientation as a string, it can be "landscape-primary", "landscape-secondary", "portrait-primary", or "portrait-secondary".
Creating React Application:
Step 1: Make a project directory, head over to the terminal, and create a react app named useorientation-example using the following command:
npx create-react-app useorientation-example
Step 2: After the useorientation-example app is created, switch to the new folder useorientation-example by typing the command below:
cd useorientation-example
Step to include useOrientation hook:
To use the useOrientation hook in your project, you will need to install the react-use library first. You can install it by running the following command in your terminal:
npm install react-use
Then, you can import the hook in your React component:
import { useOrientation } from 'react-use';
Project Structure: We will modify the folder and keep the files we need for this example. Now, make sure your file structure looks like this:
Project DirectoryLet's see a few examples of how useOrientation hook works in practice.
Example 1: Render different content based on the orientation of the screen.
- We will use the useOrientation hook from the react-use library to determine the orientation of the screen.
- We will use a ternary operator to check the value of the type and render either the LandscapeContent component or the PortraitContent component based on the value of the type.
- If the type is landscape-primary it will render LandscapeContent otherwise it will render PortraitContent.
- This way, the component will render different content based on the device's screen orientation and provide a better user experience.
App.js:
JavaScript
import { useOrientation } from 'react-use';
import './App.css';
const PortraitContent = () => {
return (
<div>
<h1>Welcome to the portrait mode</h1>
<p className="content-portrait">Here is some information that's
specific to portrait mode</p>
</div>
);
}
const LandscapeContent = () => {
return (
<div>
<h1>Welcome to the landscape mode</h1>
<p className="content-landscape">Here is some information that's
specific to landscape mode</p>
</div>
);
}
const App = () => {
const { type } = useOrientation();
return (
<div>
{type === 'landscape-primary' ? (
<LandscapeContent />
) : (
<PortraitContent />
)}
</div>
);
}
export default App;
App.css: Add the following code to App.css to style the application.
CSS
* {
color: green;
font-weight: bold;
}
.content-landscape {
color: black;
font-size: 25px;
}
.content-portrait {
color: red;
}
Step to run the application: Run the application by using the following command:
npm start
Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser. Open DevTools by pressing F12 and click on the "Device Toggle Toolbar” to adjust the device orientation.
As the orientation of our screen changes from landscape to portrait, the content changes.
Example 2: Creating a responsive navigation bar using the useOrientation hook.
In this example, the useOrientation hook determines the current device orientation, either portrait or landscape. A styles object is defined to hold the styles for the navbar. The styles are dynamic and change based on orientation.
App.js:
JavaScript
import React from 'react';
import { useOrientation } from 'react-use';
const Navbar = () => {
const { type } = useOrientation();
const styles = {
container: {
display: 'flex',
justifyContent: 'space-between',
padding: '20px',
backgroundColor: 'lightgray',
},
logo: {
fontSize: type === 'portrait-primary'
? '2rem' : '3rem',
color: 'white',
},
navLinks: {
display: 'flex',
flexDirection: type === 'portrait-primary'
? 'column' : 'row',
},
navLink: {
margin: type === 'portrait-primary'
? '10px 0' : '0 10px',
fontSize: type === 'portrait-primary'
? '1.5rem' : '2rem',
color: type === 'portrait-primary'
? 'white' : 'black',
},
};
return (
<div style={styles.container}>
<h1 style={styles.logo}>My App</h1>
<nav style={styles.navLinks}>
<a href="#" style={styles.navLink}>Home</a>
<a href="#" style={styles.navLink}>About</a>
<a href="#" style={styles.navLink}>Contact</a>
</nav>
</div>
);
};
export default Navbar;
Step to run the application: Run the application by using the following command:
npm start
Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser. Open DevTools by pressing F12 and click on the "Device Toggle Toolbar” to adjust the device orientation.
As the orientation changes, the styles will update dynamically to provide a responsive layout.
Similar Reads
JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
JavaScript Interview Questions and Answers JavaScript is the most used programming language for developing websites, web servers, mobile applications, and many other platforms. In Both Front-end and Back-end Interviews, JavaScript was asked, and its difficulty depends upon the on your profile and company. Here, we compiled 70+ JS Interview q
15+ min read
Decorators in Python In Python, decorators are a powerful and flexible way to modify or extend the behavior of functions or methods, without changing their actual code. A decorator is essentially a function that takes another function as an argument and returns a new function with enhanced functionality. Decorators are
10 min read
AVL Tree Data Structure An AVL tree defined as a self-balancing Binary Search Tree (BST) where the difference between heights of left and right subtrees for any node cannot be more than one. Balance Factor = left subtree height - right subtree heightFor a Balanced Tree(for every node): -1 ⤠Balance Factor ⤠1Example of an
4 min read
What is a Neural Network? Neural networks are machine learning models that mimic the complex functions of the human brain. These models consist of interconnected nodes or neurons that process data, learn patterns and enable tasks such as pattern recognition and decision-making.In this article, we will explore the fundamental
12 min read
Domain Name System (DNS) DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w
8 min read
NodeJS Interview Questions and Answers NodeJS is one of the most popular runtime environments, known for its efficiency, scalability, and ability to handle asynchronous operations. It is built on Chromeâs V8 JavaScript engine for executing JavaScript code outside of a browser. It is extensively used by top companies such as LinkedIn, Net
15+ min read
HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML
14 min read