Skip to content

A few demos on how the new portal API can be used with React.

Notifications You must be signed in to change notification settings

jscottsmith/portal-demos

Repository files navigation

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

About

A few demos on how the new portal API can be used with React.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published