minmal-feedback

minimal-feedback is a blazingly fast and highly customizable component to get user feedback.

Live Demo

---

Live Demo at minimal-feedback

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