Skip to content

Commit

Permalink
feat: add titleSeparator prop & update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@juwain
juwain committed Jul 6, 2022
1 parent 4a86c5b commit 95832f5
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 32 deletions.
61 changes: 31 additions & 30 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,36 +51,37 @@ export default function MyComponent() {

### Available Props

| Prop | Type | Options | Description | Default |
| --------------------- | --------------- | -------- | --------------------------------------------- | :------------------------: |
| `ratingValue` | number | Required | Rating value passed from the Rating component | `-` |
| `onClick` | function | Optional | Handles the returned rating value | `-` |
| `initialValue` | number | Optional | Set initial value (needed to reset the value) | `0` |
| `iconsCount` | number | Optional | Number of the icons | `5` |
| `size` | number | Optional | Icon width / height in `px` | `25` |
| `readonly` | boolean | Optional | Readonly mode | `false` |
| `fillColor` | string | Optional | Full icons color | `#f1a545` |
| `fillColorArray` | array | Optional | Array of string to add color range | `[]` |
| `emptyColor` | string | Optional | Empty icons color | `#cccccc` |
| `fullIcon` | ReactElement | Optional | Custom full icon SVG | `null` |
| `emptyIcon` | ReactElement | Optional | Custom empty icon SVG | `null` |
| `customIcons` | array of object | Optional | Add a group of icons | `[]` |
| `rtl` | boolean | Optional | RTL mode | `false` |
| `allowHalfIcon` | boolean | Optional | Enable a fractional icon (half icon) | `false` |
| `allowHover` | boolean | Optional | Enable / Disable hover effect | `true` |
| `allowHoverOnDefault` | boolean | Optional | Enable / Disable hover effect on fulled stars | `true` |
| `transition` | boolean | Optional | Adds a transition effect on mouse hover | `false` |
| `className` | string | Optional | Applied to the `main` span | `react-simple-star-rating` |
| `style` | CSSProperties | Optional | Inline style applied to the `main` span | `basic style` |
| `fullClassName` | string | Optional | Applied to the `filled` icon span | `filled-icons` |
| `emptyClassName` | string | Optional | Applied to the `empty` icon span | `empty-icons` |
| `fullStyle` | CSSProperties | Optional | Inline style applied to `filled` icon span | `basic style` |
| `emptyStyle` | CSSProperties | Optional | Inline style applied to `empty` icon span | `basic style` |
| `showTooltip` | string | Optional | Show a tooltip with live values | `false` |
| `tooltipDefaultText` | string | Optional | Initial tooltip text if no rating value | `Your Rate` |
| `tooltipArray` | array | Optional | Array of strings to show inside tooltip | `[]` |
| `tooltipClassName` | string | Optional | Tooltip CSS class | `rating-tooltip` |
| `tooltipStyle` | CSSProperties | Optional | Inline style applied to the `tooltip` span | `basic style` |
| Prop | Type | Options | Description | Default |
| --------------------- | --------------- | -------- | --------------------------------------------------------- | :------------------------: |
| `ratingValue` | number | Required | Rating value passed from the Rating component | `-` |
| `onClick` | function | Optional | Handles the returned rating value | `-` |
| `initialValue` | number | Optional | Set initial value (needed to reset the value) | `0` |
| `iconsCount` | number | Optional | Number of the icons | `5` |
| `size` | number | Optional | Icon width / height in `px` | `25` |
| `readonly` | boolean | Optional | Readonly mode | `false` |
| `fillColor` | string | Optional | Full icons color | `#f1a545` |
| `fillColorArray` | array | Optional | Array of string to add color range | `[]` |
| `emptyColor` | string | Optional | Empty icons color | `#cccccc` |
| `fullIcon` | ReactElement | Optional | Custom full icon SVG | `null` |
| `emptyIcon` | ReactElement | Optional | Custom empty icon SVG | `null` |
| `customIcons` | array of object | Optional | Add a group of icons | `[]` |
| `rtl` | boolean | Optional | RTL mode | `false` |
| `allowHalfIcon` | boolean | Optional | Enable a fractional icon (half icon) | `false` |
| `allowHover` | boolean | Optional | Enable / Disable hover effect | `true` |
| `allowHoverOnDefault` | boolean | Optional | Enable / Disable hover effect on fulled stars | `true` |
| `transition` | boolean | Optional | Adds a transition effect on mouse hover | `false` |
| `className` | string | Optional | Applied to the `main` span | `react-simple-star-rating` |
| `style` | CSSProperties | Optional | Inline style applied to the `main` span | `basic style` |
| `fullClassName` | string | Optional | Applied to the `filled` icon span | `filled-icons` |
| `emptyClassName` | string | Optional | Applied to the `empty` icon span | `empty-icons` |
| `fullStyle` | CSSProperties | Optional | Inline style applied to `filled` icon span | `basic style` |
| `emptyStyle` | CSSProperties | Optional | Inline style applied to `empty` icon span | `basic style` |
| `showTooltip` | string | Optional | Show a tooltip with live values | `false` |
| `tooltipDefaultText` | string | Optional | Initial tooltip text if no rating value | `Your Rate` |
| `tooltipArray` | array | Optional | Array of strings to show inside tooltip | `[]` |
| `tooltipClassName` | string | Optional | Tooltip CSS class | `rating-tooltip` |
| `tooltipStyle` | CSSProperties | Optional | Inline style applied to the `tooltip` span | `basic style` |
| `titleSeparator` | string | Optional | Separator word in a title of a rating star `(1 out of 5)` | `out of` |

---

Expand Down
6 changes: 4 additions & 2 deletions src/Components/Rating.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ export interface Props {
tooltipArray?: string[]
tooltipClassName?: string
tooltipStyle?: React.CSSProperties
titleSeparator?: string
}

export function Rating({
Expand Down Expand Up @@ -121,7 +122,8 @@ export function Rating({
tooltipDefaultText = 'Your Rate',
tooltipArray = [],
tooltipClassName = 'react-simple-star-rating-tooltip',
tooltipStyle
tooltipStyle,
titleSeparator = 'out of',
}: Props) {
const [{ defaultValue, hoverValue }, dispatch] = useReducer(reducer, {
defaultValue: ratingValue,
Expand Down Expand Up @@ -290,7 +292,7 @@ export function Rating({
width: `${valuePercentage}%`,
...fullStyle
}}
title={`${(hoverValue && renderValue(hoverValue)) || renderValue(localRating)} out of ${iconsCount}`}
title={`${(hoverValue && renderValue(hoverValue)) || renderValue(localRating)} ${titleSeparator} ${iconsCount}`}
>
{[...Array(iconsCount)].map((_, index) => (
<Fragment key={index}>{customIcons[index]?.icon || fullIcon || <StarIcon size={size} />}</Fragment>
Expand Down

0 comments on commit 95832f5

Please sign in to comment.