updated readme

Author: projectsbydan

README.md

@@ -4,6 +4,8 @@
 
 ## Show a heatmap based on the time of day for a week
 
+😎 Demo: https://react-time-heatmap.netlify.app/
+
 The component takes in time entries and displays the count as a heatmap.
 
 ✔ You can add entries for an unlimited number of days
@@ -12,26 +14,61 @@ The component takes in time entries and displays the count as a heatmap.
 
 ✔ Can be made to flow, to use all space it has responsively
 
-## Basic setup
-
-| Description                                       | Example                                                                  |
-| ------------------------------------------------- | ------------------------------------------------------------------------ |
-| Shows entries from 7 days separated into 4 groups | ![Basic setup image](https://react-time-heatmap-img.netlify.app/7_4.gif) |
+## Examples
 
-Code Example:
+Shows entries from 7 days separated into 4 groups
 
 ```typescript
 <TimeHeatMap timeEntries={entries} />
 ```
 
-## Custom days and group size
+Shows entries into a custom number of groups
 
-| Description                                        | Example                                                                   |
-| -------------------------------------------------- | ------------------------------------------------------------------------- |
-| Shows entries from 10 days separated into 7 groups | ![Basic setup image](https://react-time-heatmap-img.netlify.app/10_7.gif) |
+```typescript
+<TimeHeatMap timeEntries={entries} numberOfGroups={7} />
+```
 
-Code Example:
+Shows count for every hour
 
 ```typescript
-<TimeHeatMap timeEntries={entries} numberOfGroups={7} />
+<TimeHeatMap timeEntries={entries} showCounts={true} />
 ```
+
+## Available options
+
+| Option               | Required | Description                                                 | Default value       |
+| -------------------- | -------- | ----------------------------------------------------------- | ------------------- |
+| timeEntries          | yes      | array of entries, needs to have 24 entries per day          | `[]`                |
+| numberOfGroups       | no       | the number of groups to split the colours into              | `4`                 |
+| flow                 | no       | allow the component to take the full width of its container | `false`             |
+| textForNoTimeEntries | no       | custom text to show when there are no entries loaded        | `"No time entries"` |
+| showCounts           | no       | shows the counts for every hour, for testing                | `false`             |
+
+## Entries example (shortened)
+
+![Entries example](https://react-time-heatmap-img.netlify.app/entries.png)
+
+✔ time. minute or time zone are not relevant
+
+✔ the time needs to be a valid date
+
+✔ the entries will be sorted by the component
+
+👏 typescript will make sure you type everything right
+
+## Examples
+
+| Base example                                                        | Custom nr. groups                                                         | Show counts                                                            |
+| ------------------------------------------------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| ![Base example](https://react-time-heatmap-img.netlify.app/7_4.gif) | ![Custom nr. groups](https://react-time-heatmap-img.netlify.app/10_7.gif) | ![Show counts](https://react-time-heatmap-img.netlify.app/numbers.gif) |
+
+Flow enabled, responsive
+
+![Show counts](https://react-time-heatmap-img.netlify.app/flow.gif)
+
+## About
+
+- made with React Hooks
+- uses CSS Grid to create the arrangement
+- styles applied with sass modules
+- support by any browser that supports grids (not IE)