The Setup

• React v18
• TypeScript
• Style: Tailwind CSS
• UI library: shadcn/ui
• UI development with Storybook
• Linting with ESLint and code formatting with Prettier
• Conventional commit messages with Commitlint
• Build the library with Rollup
• Automated release with changesets

Getting Started

Install with yarn or npm or pnpm:

pnpm add @ntheanh201/react-user-feedback

Usage

import UserFeedback from '@ntheanh201/react-user-feedback';
import '@ntheanh201/react-user-feedback/dist/styles.css';

<UserFeedback
	disabled={false}
	allowImage={true}
	feedbackTypes={[
		{ value: 'general', label: 'General' },
		{ value: 'bug', label: 'Bug' },
		{ value: 'idea', label: 'Idea' },
	]}
	onSubmit={(values, onError) => {
		console.log('values: ', values);
	}}
/>

Props

| prop | description | type | required? | default | | ------------- | ---------------------------------------------- | ------------------- | --------- | ------------------------------------------------------------------------------------------------------- | | disabled | Hide user's feedback | boolean | no | false | | allowImage | Allow upload image | boolean | no | false | | feedbackTypes | Custom feedback types | array<label, value> | no | [{ value: 'general', label:'General' },{ value: 'bug', label: 'Bug' },{ value: 'idea', label: 'Idea' }] | | timeout | Set timeout for the button's label when submit | number | no | 3000 | | onSubmit | Submit function | function | yes |

Contributing

To run this module locally:

1. Clone the repo:

   git clone https://github.com/ntheanh201/react-user-feedback

2. Install the node modules

   pnpm i

3. Run

• Run the demo

  pnpm start

• Run the storybook

  pnpm storybook

This will bundle the client with parcel and listening on http://localhost:1234

Open http://localhost:1234 to view the demo