All Projects → dulajkavinda → Minimal Feedback

dulajkavinda / Minimal Feedback

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Minimal Feedback

Cash Cli
💰💰 Convert currency rates directly from your terminal!
Stars: ✭ 168 (+115.38%)
Mutual labels:  open-source, npm, npm-package
Length.js
📏 JavaScript library for length units conversion.
Stars: ✭ 292 (+274.36%)
Mutual labels:  open-source, npm, npm-package
Rando.js
The world's easiest, most powerful random function.
Stars: ✭ 659 (+744.87%)
Mutual labels:  open-source, npm, npm-package
Startbootstrap Shop Item
A shop item Bootstrap HTML template created by Start Bootstrap
Stars: ✭ 76 (-2.56%)
Mutual labels:  open-source, bootstrap
Actions Package Update
keeps npm dependencies up-to-date by making pull requests from GitHub Actions or CI.
Stars: ✭ 36 (-53.85%)
Mutual labels:  npm, npm-package
Freelancers Market
Laravel Project to help freelance websites clients and freelancers to find each other.
Stars: ✭ 39 (-50%)
Mutual labels:  open-source, bootstrap
Ax5ui Uploader
jQuery file uploader, HTML5(IE9+, FF, Chrome, Safari) - http://ax5.io/ax5ui-uploader/
Stars: ✭ 25 (-67.95%)
Mutual labels:  npm, bootstrap
React Use Api
Async HTTP request data for axios. Designed for diverse UI states, SSR and data pre-caching.
Stars: ✭ 49 (-37.18%)
Mutual labels:  npm, npm-package
Nls
Missing inspector for npm packages.
Stars: ✭ 44 (-43.59%)
Mutual labels:  npm, npm-package
Awesome Node Utils
some useful npm packages for nodejs itself
Stars: ✭ 51 (-34.62%)
Mutual labels:  npm, npm-package
Packagephobia
⚖️ Find the cost of adding a new dependency to your project
Stars: ✭ 1,110 (+1323.08%)
Mutual labels:  npm, npm-package
Startbootstrap Round About
A Bootstrap HTML template for creating about pages - created by Start Bootstrap
Stars: ✭ 35 (-55.13%)
Mutual labels:  open-source, bootstrap
Yarpm
CLI tool to run npm scripts with either npm or yarn, depending on how it was started
Stars: ✭ 13 (-83.33%)
Mutual labels:  npm, npm-package
Startbootstrap 2 Col Portfolio
A two column Bootstrap HTML portfolio template - created by Start Bootstrap
Stars: ✭ 40 (-48.72%)
Mutual labels:  open-source, bootstrap
Startbootstrap New Age
A web app landing page theme created by Start Bootstrap
Stars: ✭ 855 (+996.15%)
Mutual labels:  open-source, bootstrap
Nodejs Socketio Chat App
MEAN Stack & Socket.IO Real-time Chat App | A MEAN stack based Real Time chat application
Stars: ✭ 45 (-42.31%)
Mutual labels:  npm, bootstrap
Admin4b
Bootstrap 4 Admin Template
Stars: ✭ 58 (-25.64%)
Mutual labels:  open-source, bootstrap
Incompose
A inferno utility belt for function components and higher-order components
Stars: ✭ 76 (-2.56%)
Mutual labels:  npm, npm-package
Awesome Uikit
Collect JS Frameworks, Web components library and Admin Template.
Stars: ✭ 1,136 (+1356.41%)
Mutual labels:  react-components, bootstrap
Startbootstrap Modern Business
A multipurpose Bootstrap full website template created by Start Bootstrap
Stars: ✭ 753 (+865.38%)
Mutual labels:  open-source, bootstrap

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].