📖 Documentation
⚙️ Installation
npm i zen-npm-all-coba
📚 Components
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",
},
}}
/>