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:
.png)
Project Directory
Let’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
ReactJS useLocalStorage Custom Hook
useLocalStorage hook makes it easy. It creates a stateful value for localStorage and gives us a function to update that value like useState. In our projects, we frequently use localStorage and state but it's a bit tricky to work localStorage's value with the state. Syntax:  const [ count, setCount
3 min read
ReactJS useUndoState hook
The useUndoState hook is a custom hook provided by the Rooks package for React. It is similar to the useState hook in addition to undo functionality. Arguments: initialValue: It is of the type boolean that describes the initial value of the state. Its default value is false.Options: It is of the typ
2 min read
ReactJS useNavigate() Hook
React Router v6 introduces the useNavigate() hook, making it easier and more flexible to navigate between different pages in your app. It replaces the older useHistory() hook. With the useNavigate() hook, you can: Go to a different page in your app.Navigate based on actions like button clicks.Send d
5 min read
React Custom Hooks
In React, components often share similar logic, such as fetching data or handling form inputs. Instead of repeating this logic across multiple components, we can extract it into a custom hook. But what exactly are custom hooks, and how do they help? What Are Custom Hooks?A custom hook is a JavaScrip
6 min read
ReactJS useId Hook
React useId Hook is introduced for the ReactJS versions above 18. This hook generates unique IDs i.e, returns a string that is stable across both the server and the client sides. Prerequisite: Introduction and installation of ReactJSReact Hooks Syntax: const id = useId() Creating React Application:
3 min read
ReactJS useEffect Hook
The useEffect hook is one of the most commonly used hooks in ReactJS used to handle side effects in functional components. Before hooks, these kinds of tasks were only possible in class components through lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount. What is
5 min read
React useState Hook
The useState hook is a function that allows you to add state to a functional component. It is an alternative to the useReducer hook that is preferred when we require the basic update. useState Hooks are used to add the state variables in the components. For using the useState hook we have to import
5 min read
ReactJS useSelect hook
The useSelect is a custom hook provided by the Rooks package for React. It is a list selection hook that helps select values from a list. Arguments: list: It is of the type array which describes the list of items for the selection. The default value is undefined.initialIndex -It is of the type numbe
2 min read
ReactJS useReducer Hook
The useReducer hook is an alternative to the useState hook that is preferred when you have complex state logic. It is useful when the state transitions depend on previous state values or when you need to handle actions that can update the state differently. Syntax const [state, dispatch] = useReduce
5 min read
Testing Custom Hooks with React Testing Library
React hooks fall into two categories: built-in hooks provided by React itself and custom hooks, which are user-defined functions. The most commonly used built-in hooks are useState, useEffect, useMemo, and useCallback. Custom hooks in React are JavaScript functions that allow you to excerpt and reus
5 min read