📖 Documentation

⚙️ Installation

npm i zen-npm-all-coba

📚 Components

• ⚓️ Mcq (Pilihan Ganda)

• ⚓️ ...

Mcq (Pilihan Ganda)

🛠 Usage

import { Mcq } from "zen-npm-all-coba";

🗺 Props

| Name | Description | | ---------- | --------------------------------------- | | options | list of the answer (array) | | ansUser | initial state if already answered | | onChange | function for receiving answer from user | | styles | custom style |

options (required) 📌

<Mcq
  options={["sampan", "kapal", "perahu", "delman"]}
/>

ansUser (optional) ✅

<Mcq
  options={["sampan", "kapal", "perahu", "delman"]}
  ansUser={"kapal"}
/>

onChange (optional) 🏋

function printAnswer(params) {
  console.log(params);
}

<Mcq
  options={["sampan", "kapal", "perahu", "delman"]}
  onChange={printAnswer}
/>

styles (optional) 🎨

| Class | Description | | -------------------- | -------------------------------------------------------------- | | mcqContainer | a basic style display for cards ex: width, grid, margin | | mcqContainerMobile | a basic style mobile display for cards ex: width, grid, margin | | mcqCard | Custom styles created for each option | | mcqCardMobile | Custom styles created for each option on mobile display | | mcqCardActive | Custom styles created for card when presses down | | mcqCardHover | Custom styles created for card when mouse over card | | mcqP | Custom styles created for text options |

<Mcq
  options={["sampan", "kapal", "perahu", "delman"]}
  styles={{
    mcqContainer: { backgroundColor: "teal" },
    mcqCard: {
      borderRadius: "0",
      transitionDuration: "500ms",
    },
    mcqP: {
      margin: "none",
    },
    mcqCardActive: {
      backgroundColor: "salmon",
    },
    mcqCardMobile: {
      backgroundColor: "brown",
    },
  }}
/>