🕳 React Portals: Creating a wormhole

Description

In this project I want to show you how we can use React Portals to create amazing features like a wormhole.

What we will do is set a draggable spaceship that we could move around the screen and place into a wormhole to go to another part of the screen. This feature is achieven using React Portals and the hook useRef to maintain a reference to the two wormholes.

You will learn

Use React Portals to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Use useRef hook to keep references to DOM elements.

Use the library (React Draggable)[https://www.npmjs.com/package/react-draggable] to move the spaceship around the screen.

Run the project

Use yarn start to run the app in the development mode and open http://localhost:3000 to view it in the browser.

To read more

• React Portals documentation
• React Portals. Una introducción