Brauz Questionnaire UI

A configurable React UI library for rendering dynamic, section-based questionnaires.

Built with React 18, TailwindCSS, Radix UI, and React Hook Form.
Designed for structured form rendering in production environments.

Installation

npm install brauz-questionnaire-ui
#or
yarn add brauz-questionnaire-ui

Peer dependencies:

"react": "18.2.0",  
"react-dom": "18.2.0"

Basic Usage

import  BrauzQuestionnaire  from  "brauz-questionnaire-ui";  
  
function  App() {  
  return (  
      <BrauzQuestionnaire  
	      data={questionnaireData}  
	      onSubmit={(values) => {  
		      console.log(values);  
				}}  
      />  
 );  
}

Component API

<BrauzQuestionnaire />

|Prop|Required|Description| |--|--|--| |data|✅|Questionnaire object| |onSubmit|✅|Form submit handler| |config|❌|Global configuration override| |renderFooter|❌|Custom footer renderer|

Configuration

Default configuration:

{  
  with_section_title: true,  
  with_label: true,  
  form_config: {},  
}

Example override:

<BrauzQuestionnaire
    data={data}
    onSubmit={handleSubmit}
    config={{
	    with_label: false,
	    form_config: { mode: "onChange" },
	  }}
/>

Data Structure

Root

{  
  title: string  
  description: string  
  sections: Section[]  
}

Section

{  
  title: string  
  items: QuestionItem[]  
}

Question Item

{  
  g_id: string  
  label: string  
  type: string  
  is_required: boolean  
  options?: array
  placeholder?: string
  date_format?: string  
}

Supported Field Types

• INPUT
• TEXTAREA
• SELECT
• RADIO
• CHECKBOX
• DATE_PICKER
• SIGNATURE

Tailwind Setup

This library uses TailwindCSS.

Add to your tailwind.config.js:

export  default {  
     content: [  
       "./src/**/*.{js,ts,jsx,tsx}",  
       "./node_modules/brauz-questionnaire-ui/**/*.{js,ts,jsx,tsx}",  
     ],  
};

Build Output

dist/  
 ├── brauz-questionnaire-ui.mjs  
 ├── brauz-questionnaire-ui.umd.cjs  
 └── brauz-questionnaire-ui.css

License

MIT