https://github.com/sahajre/react-typeform-rating
Typeform like rating component :star: :star: :star: :star: :star:
https://github.com/sahajre/react-typeform-rating
rating react survey typeform
Last synced: 4 months ago
JSON representation
Typeform like rating component :star: :star: :star: :star: :star:
- Host: GitHub
- URL: https://github.com/sahajre/react-typeform-rating
- Owner: sahajre
- License: mit
- Created: 2017-09-02T10:44:55.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2019-01-05T07:34:06.000Z (over 7 years ago)
- Last Synced: 2025-10-19T18:44:30.077Z (8 months ago)
- Topics: rating, react, survey, typeform
- Language: JavaScript
- Homepage:
- Size: 731 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-typeform-rating
Typeform like rating component (unofficial).
## Try demo
1. Clone repo
````
git clone https://github.com/sahajRe/react-typeform-rating.git
````
2. Install dependencies
`npm install` or `yarn install`
3. Start development server
`npm start` or `yarn start`
Runs the demo app in development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
## How to install `react-typeform-rating` npm package in your project?
`npm install react-typeform-rating` or `yarn add react-typeform-rating`
Then, include `demo/App.css` in your App:
`import /App.css`
If you are using font awesome, like I do in the demo, you can copy related files `public/css/fontawesome.css` and `public/social/` and include the CSS path in 'public/index.html'. Alternatively, you may use Bootstrap `glyphycon`.
Usage:
````
}
halfStarSelection={false} // to allow half star selection, boolean, default false
keyPressed={this.state["name1"].key} // keyCode of key pressed, you can use any key binding library, the demo uses react-keydown
emptyStar="fa fa-3x fa-star-o" // CSS class for showing empty stars
selectedStar="fa fa-3x fa-star" // CSS class for showing filled/selected star
/>
````
## Contributions
Suggestions, issues, feature and pull requests are most welcomed.