https://github.com/untemps/solid-readotron

SolidJS component to display an estimated reading time
https://github.com/untemps/solid-readotron

component javascript read-o-meter reading-rates reading-time reading-time-estimator solid solid-components solid-js solidjs speed-reading-time

Last synced: about 1 month ago
JSON representation

SolidJS component to display an estimated reading time

• Host: GitHub
• URL: https://github.com/untemps/solid-readotron
• Owner: untemps
• Created: 2022-02-15T17:31:20.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-13T17:20:07.000Z (almost 2 years ago)
• Last Synced: 2024-09-26T10:18:37.106Z (3 months ago)
• Topics: component, javascript, read-o-meter, reading-rates, reading-time, reading-time-estimator, solid, solid-components, solid-js, solidjs, speed-reading-time
• Language: JavaScript
• Homepage: https://solid-readotron.vercel.app/
• Size: 838 KB
• Stars: 9
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-solid-js - Solid Readotron - readotron)) (📦 Components & Libraries / UI Components)

README

        


    Svelte component to display an estimated reading time



---

[![npm](https://img.shields.io/npm/v/@untemps/solid-readotron?style=for-the-badge)](https://www.npmjs.com/package/@untemps/solid-readotron)

[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/untemps/solid-readotron/index.yml?style=for-the-badge)](https://github.com/untemps/solid-readotron/actions)

[![Codecov](https://img.shields.io/codecov/c/github/untemps/solid-readotron?style=for-the-badge)](https://codecov.io/gh/untemps/solid-readotron)

## Demo



    :red_circle: LIVE

    DEMO :red_circle:

    



    



## Installation

```bash

yarn add @untemps/solid-readotron

```

## Usage

### Basic usage

```html

	

	...

```

### API

| Props      | Type               | Default           | Description                                                                                                                                                     |

| ---------- | ------------------ |-------------------| ----------------------------------------------------------------------------------------------------------------------- |

| `selector` | string             | (required)        | Selector of the element which contains the content to parse. See [Selector](#selector)                                  |

| `lang`     | string             | 'default'         | Lang of the content. See [Lang](#lang)                                                                                  |

| `template` | string             | '%time% min read' | Display template which contains dynamic tokens to be replaced by the parsed values. See [Template](#template)           |

### Selector

`selector` prop is mandatory as it points to which element contains the text content to parse.

You can utilize any selector supported by the Web API [querySelector](https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector) function.  

If several elements match the selector, it only parses the text of the first element in the array.

### Lang

'lang' is an optional prop that designates the language of the text to parse. The component implements the [@untemps/read-per-minute](https://github.com/untemps/read-per-minute) underhand package which returns an estimation based on the _lang_ (language).  

Reading rates by _lang_ come from ["How many words do we read per minute? A review and meta-analysis of reading rate"](https://osf.io/4nv9f/) by Marc Brysbaert - Department of Experimental Psychology Ghent University

| Lang    | Rate |

| ------- | ---- |

| default | 200  |

| ar      | 181  |

| zh      | 260  |

| nl      | 228  |

| en      | 236  |

| fi      | 195  |

| fr      | 214  |

| de      | 260  |

| he      | 224  |

| it      | 285  |

| ko      | 226  |

| es      | 278  |

| sv      | 218  |

If a lang is not defined or the provided lang is not listed, the **default** value (200) will be applied.

#### Example

```html

	

	...

```

### Template

You can customize the Readotron display by using the `template` prop: a template is a string with one or more tokens delimited with `%`

#### Available tokens

| Token   | Description                         |

| ------- | ----------------------------------- |

| `time`  | Estimated reading time (in minutes) |

| `words` | Number of words                     |

#### Example

```html

	

	...

```

### Children

Another way to customize the Readotron display is to pass down a function as children.

#### Available arguments

| Token   | Description                         |

| ------- | ----------------------------------- |

| `time`  | Estimated reading time (in minutes) |

| `words` | Number of words                     |

| `error` | Parsing error if available          |

#### Example

```html

    

      {(time, words, error) => (

      Oops}>

        

          {time} min read ({words} words)

        

      ``

      )}

    

    

        ...

    

```

## Development

The component can be served for development purpose on `http://localhost:10001/` running:

```

yarn dev

```

## Contributing

Contributions are warmly welcomed:

-   Fork the repository

-   Create a feature branch

-   Develop the feature AND write the tests (or write the tests AND develop the feature)

-   Commit your changes

    using [Angular Git Commit Guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines)

-   Submit a Pull Request