https://github.com/ger86/react-portals-wormhole

In this project I want to show you how we can use React Portals to create impressive features like a wormhole.
https://github.com/ger86/react-portals-wormhole

react react-developers react-hook react-hooks react-portal reactjs useref

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ger86/react-portals-wormhole
• Owner: ger86
• License: gpl-3.0
• Created: 2019-12-18T09:44:21.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T10:44:29.000Z (over 2 years ago)
• Last Synced: 2025-03-15T01:50:04.897Z (about 1 month ago)
• Topics: react, react-developers, react-hook, react-hooks, react-portal, reactjs, useref
• Language: JavaScript
• Homepage: https://medium.com/@ger86/react-portals-una-introduccion-29c296324334
• Size: 4.12 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🕳 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](https://reactjs.org/docs/portals.html)

- [React Portals. Una introducción](https://medium.com/@ger86/react-portals-una-introduccion-29c296324334)