• Stars
    star
    107
  • Rank 312,141 (Top 7 %)
  • Language
    JavaScript
  • Created about 4 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

[Deprecated] A storybook addon that helps you create truly mobile-friendly components

📱storybook-mobile

No Maintenance Intended npm version

Deprecated!

Mobile web best practices are constantly evolving, and I haven't had the time to make the necessary updates to keep the warnings and hints up-to-date. Please feel free to fork this library. I don't recommend using this add-on for new projects.

Original readme:

This addon offers suggestions on how you can improve the HTML, CSS and UX of your components to be more mobile-friendly.

To see all available suggestions, check out a live storybook demo here.

Quick Start

yarn add -D storybook-mobile or npm install --save-dev storybook-mobile

Next, add storybook-mobile to your list of addons:

.storybook/main.js

module.exports = {
  // other config goes here
  addons: [
+    'storybook-mobile'
  ],
}

This addon works best along with the @storybook/addon-viewport addon, so please install that as well if you don't have it already.

Contributing

If you have any suggestions or find any bugs, please make an issue or a pr!

NOTE: While developing this addon locally, if you are using npm <v7, you'll need to manually install peerDependencies like so:

npm install --no-save react react-dom

More Repositories

1

react-flip-toolkit

A lightweight magic-move library for configurable layout transitions
TypeScript
3,773
star
2

mobile-first-animation

Gesture-driven animation on the mobile web (React Conf 2019)
JavaScript
2,069
star
3

animate-css-grid

Painless transitions for CSS Grid
TypeScript
1,300
star
4

react-animation-comparison

A tour of React animation libraries with a focus on developer experience
JavaScript
685
star
5

bundle-wizard

Magically easy insight into the JavaScript loaded by a web app
JavaScript
684
star
6

react-stripe-menu

A clone of Stripe's animated menu using React, Styled Components and React-Flip-Toolkit
JavaScript
458
star
7

react-flip-toolkit-router-example

Meaningful transitions with react-router-v4 and react-flip-toolkit
JavaScript
102
star
8

aholachek.github.io

My website
JavaScript
53
star
9

redux-usage-report

A Redux Devtools monitor to audit your app's usage of the store
JavaScript
41
star
10

react-animations-from-scratch

JavaScript
20
star
11

react-2019-interactive-workbook

Learn new features of React interactively
JavaScript
18
star
12

scrollbounce

Add a subtle bounce effect on mobile when the user scrolls (WIP)
JavaScript
17
star
13

react-spring-workshop

Learn by building small animations
JavaScript
9
star
14

gif-search

Take a selfie, get a gif
CSS
8
star
15

github-actions-examples

Tiny test repo for github actions
HTML
7
star
16

review-fetch

Code exercises to help you solidify your knowledge of fetch
JavaScript
6
star
17

react-fancy-tween-circular-progress

A configurable circular progress bar with color and number animation
JavaScript
3
star
18

overdrive-experiment

JavaScript
1
star
19

virgin-airlines

A prototype for a Virgin Airlines mobile ticket site redesign
JavaScript
1
star
20

tap-demo

JavaScript
1
star
21

npm-script-starter

A basic front end development setup using npm scripts
JavaScript
1
star
22

spring-example

JavaScript
1
star
23

gif-search-backend

JavaScript
1
star
24

meaningful-layout-transitions

JavaScript
1
star
25

basic-postcss-setup

A simple npm scripts-powered set up for experimenting with Shoelace.css and postcss in general
HTML
1
star