minmal-feedback

NPM JavaScript Style Guide downloads

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

animated

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

Minimal Feedback

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

Minimal Feedback Info

⭐ Stars 86
🔗 Source Code github.com
🕒 Last Update 5 months ago
🕒 Created a year ago
🐞 Open Issues 2
➗ Star-Issue Ratio 43
😎 Author dulajkavinda