reactjs - Limit the number of items in menu in react quizzes

Question

I am using react quizzes library: https://codesandbox.io/s/react-quizzesexample-forked-2w1gj?file=/src/index.js:408-499
According to the documentation we can choose just these kind of builder items from menu that we want using toolBox.

I want to leave just Checkboxes in the menu but i didn't find a solution for this. Who can help?

function App() {
  const [formdata, setFormData] = useState([]);

  return (
    <div className="App">
      <QuizzBuilder onChange={setFormData} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

question from:https://stackoverflow.com/questions/65598632/limit-the-number-of-items-in-menu-in-react-quizzes

Answer 1

This package react-quizzes, looks not really great. Its final build not include all modules, and require importing things directly. But if you want, here's the solution:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { QuizzBuilder } from "react-quizzes";
import ToolBox from "react-quizzes/lib/ToolBox";
import "react-quizzes/lib/assets/antd.css";

const filteredToolBox = ToolBox().filter(el => el.field_name === "checkboxes_")

function App() {
  const [formdata, setFormData] = useState([]);

  return (
    <div className="App">
      <QuizzBuilder toolBox={filteredToolBox} onChange={setFormData} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Update #1

Added logic to override ToolBox label

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { QuizzBuilder } from "react-quizzes";
import QuizExample from "./QuizExample";
import "react-quizzes/lib/assets/antd.css";
import ToolBox from "react-quizzes/lib/ToolBox";
import { defaultMessages } from "react-quizzes/lib/translations/TranslatedText";

const filteredToolBox = ToolBox().filter(
  (el) => el.field_name === "checkboxes_"
);

const messages = {
  en: {
    ...defaultMessages.en,
    "toolbox.checkboxes.name": "Here are Checkboxes"
  }
};

function App() {
  const [formdata, setFormData] = useState([]);

  return (
    <div className="App">
      <QuizzBuilder
        messages={messages}
        toolBox={filteredToolBox}
        onChange={setFormData}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);