- 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
pnpm add @ntheanh201/react-user-feedback
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);
}}
/>;
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 |
To run this module locally:
-
Clone the repo:
git clone https://github.com/ntheanh201/react-user-feedback
-
Install the node modules
pnpm i
-
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