mdingena / react-breakpoints-demo

A talk about React Breakpoints built in Storybook. Demos included.

Home Page:https://github.com/envato/react-breakpoints

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Breakpoints

Demonstrating the future of responsive web design by combining a ResizeObserver with hooks and components.

To make my talk more interactive, I wrote this Storybook library as an alternative to static slides.

Demonstrates the use of @envato/react-breakpoints.

Running this presentation

git clone git@github.com:mdingena/react-breakpoints-demo
cd react-breakpoints-demo/
npm install # you may also need to install some peer dependencies manually

1. Launch

Now open ./storybook-static/index.html in a browser window to launch the presentation.

2. Zoom

All slides up until the demos at the end were designed to be viewed at 200% browser zoom for screen sharing during a presentation. Your mileage may vary.

3. Present

Make sure you switch to Docs view at the top of the Storybook window. Then hit S to hide the sidebar, and navigate slides using Option/Alt + Up/Down.

About

A talk about React Breakpoints built in Storybook. Demos included.

https://github.com/envato/react-breakpoints


Languages

Language:JavaScript 80.0%Language:CSS 20.0%