react-easy-design

• Modal
• Loader
• Message
• DarkMode
• Dropdown
• ScrollNavigation

Install

npm install react-easy-design

yarn add react-easy-design

Usage

Modal

import { useState } from "react"
import { Modal } from "react-easy-design"

export default function App() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>Modal Open</button>

      <Modal open={open} onClose={() => setOpen(false)}>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </Modal>
    </>
  )
}

props/option

Loader

Loader.Basic

• The indicator is placed in the location you specified.
• It can control the screen.

import { Loader } from "react-easy-design"

export default function App() {
  return <Loader.Basic />
}

Loader.FullScreen :

• A transparent dim covers the entire screen.
• It can't control the screen.
• The indicator is located in the center of the screen.

import { Loader } from "react-easy-design"

export default function App() {
  return <Loader.FullScreen />
}

Message

import { Message } from "react-easy-design"

export default function App() {
  return (
    <>
      <button onClick={Message.info("Successfully submitted")}>Submit</button>

      <button onClick={Message.warning("Please enter all information")}>
        Submit
      </button>

      <button
        onClick={Message.error(
          "Response was not successful, please try again."
        )}
      >
        Submit
      </button>
    </>
  )
}

DarkMode

• Insert a <DarkModeButton> to easily switch dark mode. It appears in the bottom right corner of the screen, and you can control the theme with it.

import { DarkModeButton } from "react-easy-design"

export default function App() {
  return <DarkModeButton />
}

• useDarkMode hook gives you two options.
• "toggleDarkMode" is the function to switch between themes. Create your own button and add it to the onClick
• "isDarkMode" is a boolean that indicates if you are currently in dark mode

import { useDarkMode } from "react-easy-design"

export default function App() {
  const { toggleDarkMode, isDarkMode } = useDarkMode()

  return (
    <>
      <button onClick={toggleDarkMode}>
        {isDarkMode ? "change to Ligh-mode" : "change to Dark-mode"}
      </button>
    </>
  )
}

Dropdown

• Passes in the items to display in the dropdown in the form of {key, label}
• Insert a trigger button inside a <Dropdown> component

import { Dropdown } from "react-easy-design"

export default function App() {
  const items = [
    { key: "ko", label: "Korean" },
    { key: "en", label: "English" },
    { key: "jp", label: "Japanese" }
  ]

  return (
    <Dropdown
      menu={items}
      onSelect={item => console.log(item.key)}
      placement="bottomLeft"
    >
      <button>trigger</button>
    </Dropdown>
  )
}

ScrollNavigation

Set "id" to the elements to be placed in the navigation bar, and pass the ids to an array

import { ScrollNavigation } from "react-easy-design"

export default function App() {
  return (
    <>
      <ScrollNavigation
        items={["reservation", "products", "location", "promotion"]}
        top={100}
        backgroundColor="yellow"
        textColor="black"
      />

      {/* contents to example display */}
      <div id="reservation" style={{ height: "100vh" }}>
        reservation
      </div>
      <div id="products" style={{ height: "100vh" }}>
        items
      </div>
      <div id="location" style={{ height: "100vh" }}>
        location
      </div>
      <div id="promotion" style={{ height: "100vh" }}>
        promotion
      </div>
    </>
  )
}