Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ericadamski/react-simple-feedback
A super simple component _similar_ to a single select to be used for single answer feedback gathering
https://github.com/ericadamski/react-simple-feedback
react react-component styled-components
Last synced: about 1 month ago
JSON representation
A super simple component _similar_ to a single select to be used for single answer feedback gathering
- Host: GitHub
- URL: https://github.com/ericadamski/react-simple-feedback
- Owner: ericadamski
- Created: 2019-01-15T12:43:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T21:53:01.000Z (about 2 years ago)
- Last Synced: 2024-04-16T06:40:49.876Z (8 months ago)
- Topics: react, react-component, styled-components
- Language: JavaScript
- Size: 2.99 MB
- Stars: 5
- Watchers: 0
- Forks: 1
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Simple Feedback
A super simple component _similar_ to a single select to be used for single answer feedback gathering
# Installation
```
yarn add react-simple-feedback
```
# Usage
> This repo requires [styled-components](https://www.styled-components.com) and [react](https://reactjs.org) as peers.
### Props
```javascript
propTypes = {
/**
* Brings the component directly to the complete state.
* Does not show the tags as options or the label.
*/
complete: PropTypes.bool,
/**
* The function to call when any one of the tags is clicked.
*/
onClick: PropTypes.func,
/**
* The function to call when the close button is clicked.
*/
onClose: PropTypes.func,
/**
* This will automatically hide the element after
* a timeout of this.props.hideTimeout or 1.5 seconds.
*
* The close button will also cause this element to hide.
*/
hideOnComplete: PropTypes.func,
/**
* The amount of time (in seconds) to wait before hiding this component.
*
* This will only be taken into account if this.props.hideOnComplete is true
*/
hideTimeout: PropTypes.number,
/**
* The label of the field.
*/
label: PropTypes.string.isRequired,
/**
* The message to display after one of the options is selected
*/
message: PropTypes.string.isRequired,
/**
* The options to render
*/
tags: PropTypes.arrayOf({
/**
* The hardcoded emoji eg: '🤔'
*/
emoji: PropTypes.string,
/**
* The main text to display
*/
label: PropTypes.string,
/**
* The value associated
*/
value: PropTypes.any,
})
};
```
```JavaScript
import React from 'react';
import SimpleFeedback from 'react-simple-feedback';
module.exports = function Feedback() {
return (
);
}
```
[](https://codesandbox.io/s/yovxjo5oz)