Skip to content

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

License

Notifications You must be signed in to change notification settings

ger86/react-portals-wormhole

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🕳 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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published