accessible-react-rating

It is an accessibile react component for rating. Demo Link

Install

npm install --save accessible-react-rating

Usage

import React, { Component } from 'react';

import MyComponent from 'accessible-react-rating';

class Example extends Component {
  render() {
    return <MyComponent />;
  }
}

Properties

| Property | Type | Default | Description | | ----------------- | ---------- | --------------------- | ----------------------------------------------------- | | emptySymbol | element | in the example | shown when it is not selected | | fullSymbol | element | in the example | shown when it is selected. | | numberOfRatings | number | 5 | the number of symbols. | | initialRating | number | 0 | the number of symbols that are selected. | | legend | string | 'your ratings' | the legend in the fieldset . | | getRatingValue | function | ()=>{} | the callback function when the symbols are selected . |

Accessibility

Keyboard navigation

Use keyboard tab and arrow left/right to select the star

Screen reader

Test with VoiceOver

emptySymbol = , fullSymbol = , numberOfRatings = 5, initialRating = 0, getRatingValue = () => {}, legend = 'your ratings'

License

MIT © bowen31337