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

Gather user feedback in your React apps integrated with TailwindCSS, shadcn/ui, Storybook
https://github.com/ntheanh201/react-user-feedback

Last synced: 24 days ago
JSON representation

Gather user feedback in your React apps integrated with TailwindCSS, shadcn/ui, Storybook

• Host: GitHub
• URL: https://github.com/ntheanh201/react-user-feedback
• Owner: ntheanh201
• License: mit
• Created: 2024-02-03T17:38:04.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-01T17:29:49.000Z (7 months ago)
• Last Synced: 2024-09-14T09:15:19.694Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.2 MB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
React User Feedback




  


    Collect user's feedback for React using TailwindCSS, shadcn/ui, Storybook, Parcel, Rollup

  

  





  



## The Setup

- [React v18](https://react.dev/)

- [TypeScript](https://www.typescriptlang.org/)

- Style: [Tailwind CSS](https://tailwindcss.com/)

- UI library: [shadcn/ui](https://ui.shadcn.com/)

- UI development with [Storybook](https://storybook.js.org/)

- Linting with [ESLint](https://eslint.org/) and code formatting with [Prettier](https://prettier.io/)

- Conventional commit messages with [Commitlint](https://commitlint.js.org/)

- Build the library with [Rollup](https://rollupjs.org/)

- Automated release with [changesets](https://github.com/changesets/changesets/)

## Getting Started

### Install with `yarn` or `npm` or `pnpm`:

`pnpm add @ntheanh201/react-user-feedback`

### Usage

```typescript

import UserFeedback from '@ntheanh201/react-user-feedback';

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

 {

		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 | 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](http://localhost:1234)

Open [http://localhost:1234](http://localhost:1234) to view the demo