Skip to content

Latest commit

 

History

History
62 lines (36 loc) · 1.63 KB

README.md

File metadata and controls

62 lines (36 loc) · 1.63 KB

React Portal Demos

A few demos on how the new portal API can be used with React. Created for GumGum's techblog, also cross posted on CodePen

Starting a demo

If you don't have parcel you must first install it:

yarn global add parcel-bundler

Navigate to a demo directory. Install dependencies then run start. This will require parcel to be install globally on you machine.

cd event-bubbling
yarn install
yarn start

Then goto http://localhost:1234/

Demos

Explanations for these demos can be found here.

1. Artboard Context Menu

Artboard that lets you create shapes within a window. CodePen Demo

Artboard Context Menu

2. Chat Window

Chat app that lets you type messages with emojis. CodePen Demo

Chat Window

3. Window Portal

Messenger app that lets you “save” and share links to messages. CodePen Demo

Window Portal

4. Normal Event Bubbling

Example of normal event bubbling. CodePen Demo

Normal Event Bubbling

5. Portal Event Bubbling

Example of synthetic event bubbling in portals. CodePen Demo

Event Bubbling Portals