https://github.com/mdingena/react-breakpoints-demo
A talk about React Breakpoints built in Storybook. Demos included.
https://github.com/mdingena/react-breakpoints-demo
react resizeobserver responsive-design
Last synced: 2 months ago
JSON representation
A talk about React Breakpoints built in Storybook. Demos included.
- Host: GitHub
- URL: https://github.com/mdingena/react-breakpoints-demo
- Owner: mdingena
- Created: 2020-03-18T00:44:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-08-21T19:36:51.000Z (10 months ago)
- Last Synced: 2025-10-07T20:52:22.535Z (9 months ago)
- Topics: react, resizeobserver, responsive-design
- Language: JavaScript
- Homepage: https://github.com/envato/react-breakpoints
- Size: 19.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://github.com/envato/react-breakpoints).
## Running this presentation
```shell
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.