@w11r/use-breakpoint/dist/story.js

React useBreakpoint hook to have different values for a variable based on a breakpoints.

import React from 'react';
import useBreakpoint from "./useBreakpoint";
import Provider from "./provider";
import "./story.css";

const Component = () => {
  const value = useBreakpoint('none', [['micro', 'is micro'], ['mobile', 'is mobile'], ['tablet', 'is tablet'], ['small', 'is small'], ['medium', 'is medium'], ['large', 'is large']]);
  return /*#__PURE__*/React.createElement("div", {
    className: "wrapper"
  }, "Example code", /*#__PURE__*/React.createElement("pre", null, `const value = useBreakpoint('none', [
    ['micro', 'is micro'],
    ['mobile', 'is mobile'],
    ['tablet', 'is tablet'],
    ['small', 'is small'],
    ['medium', 'is medium'],
    ['large', 'is large']
])`), /*#__PURE__*/React.createElement("div", null, "`", value, "` is the current value. Resize to change."));
};

export default {
  title: 'useBreakpoint',
  component: Component,
  decorators: [fn => /*#__PURE__*/React.createElement(Provider, null, fn())]
};
export const Basic = () => /*#__PURE__*/React.createElement(Component, null);