dulajkavinda / Minimal Feedback
Licence: mit
🗳 minimal-feedback is a blazingly fast and highly customizable component to get user feedback.
Stars: ✭ 78
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
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
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
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
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].