minimal-feedback
minimal-feedback copied to clipboard
🗳 Blazingly fast and highly customizable component to get user feedback.
minmal-feedback
minimal-feedback is a blazingly fast and highly customizable component to get user feedback.
Live Demo
Why
I needed a "feedback component" for my projects. Since I was unable to find one which met my requirements which is very minimal looking and user friendly ui this is what i came up with.
Installation
The preferred way of using the component is via NPM
npm install --save minimal-feedback
Usage
Here's a sample implementation that creates a custom popup on a dummy Create-React-App page.
import React, { useState } from 'react'
import MinimalFeedback from 'minimal-feedback'
import 'minimal-feedback/dist/index.css' // don't forget to import css
const App = () => {
const [text, settext] = useState({ feedback: '' })
const saveFeedback = () => {
// logic here
console.log(text)
}
return (
<MinimalFeedback
save={saveFeedback}
value={text}
onChange={(e) => settext(e)}
/>
)
}
export default App
Options
Option | Type | Default | Description |
---|---|---|---|
value |
Object |
{ feedback:'', type:''} |
Set this to the value you get from the onChange function |
onChange |
Function |
() |
Called when user is typing something |
save |
Function |
() |
Called when submit button is clicked |
Sample Usage
<MinimalFeedback
save={saveFeedback}
value={text}
onChange={(e) => settext(e)}
/>
Dev
The component is written in ES6 and uses Webpack as its build tool.
Set up instructions
git clone https://github.com/dulajkavinda/minimal-feedback.git
cd minimal-feedback
npm install
npm start
Contributing
Got ideas on how to make this better? Open an issue here! Issues, Pull Requests and all Comments are welcome!
License
MIT © dulajkavinda