@omakase-ui/react-responsive-design-mode

@omakase-ui/react-responsive-design-mode 👋

🏠 Homepage

Features

• Responsive Design Mode for PC, Tablet and Mobile

Install

yarn add @omakase-ui/react-responsive-design-mode

Usage

Usage

if you don't use Tailwind CSS

import { ResponsiveDesignMode } from '@omakase-ui/react-responsive-design-mode';
import '@omakase-ui/react-responsive-design-mode/dist/index.css';

if you use Tailwind CSS

import { ResponsiveDesignMode } from '@omakase-ui/react-responsive-design-mode';

modify tailwind.config.js

// tailwind.config.js
+ const path = require("path");

module.exports = {
  content: [
    "./src/**/*{js,ts,jsx,tsx}",
+    path.join(
+      require.resolve("@omakase-ui/react-responsive-design-mode"),
+      "../**/*.{js,ts,jsx,tsx}"
+    ),
  ],
  theme: {},
  plugins: [],
};

export const Standard = () => {
  const [visible, setVisible] = useState(true);
  return (
    <div>
      <button onClick={() => setVisible(true)} className="btn-primary btn">
        Enter Responsive Design Mode
      </button>
      <ResponsiveDesignMode
        visible={visible}
        onClose={() => setVisible(false)}
        title="Responsive Design Mode"
      >
        {({ device }) => (
          <div className=" text-center ">
            <h1 className="my-8">
              The UI in <strong>{device}</strong>
            </h1>
            <div
              className={classNames(' mx-auto', {
                'grid grid-cols-3 gap-4': device === 'Desktop',
                'grid grid-cols-2 gap-4': device === 'Tablet',
                'grid grid-cols-1 gap-4': device === 'Mobile',
              })}
            >
              <div className="btn-square btn w-full bg-purple-400"></div>
              <div className="btn-square btn w-full bg-purple-400"></div>
              <div className="btn-square btn w-full bg-purple-400"></div>
            </div>
          </div>
        )}
      </ResponsiveDesignMode>
    </div>
  );
};

Development

Storybook

yarn storybook

Run tests

yarn test

Author

👤 Thaddeus Jiang

• Website: https://thaddeusjiang.com/
• Twitter: @ThaddeusJiang
• Github: @ThaddeusJiang

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2022 Thaddeus Jiang.
This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator