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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Basic = exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _useBreakpoint = _interopRequireDefault(require("./useBreakpoint"));

var _provider = _interopRequireDefault(require("./provider"));

require("./story.css");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

var _default = {
  title: 'useBreakpoint',
  component: Component,
  decorators: [fn => /*#__PURE__*/_react.default.createElement(_provider.default, null, fn())]
};
exports.default = _default;

var Basic = () => /*#__PURE__*/_react.default.createElement(Component, null);

exports.Basic = Basic;