Skip to content

Latest commit

 

History

History
151 lines (114 loc) · 4.99 KB

README.md

File metadata and controls

151 lines (114 loc) · 4.99 KB
Raw

Svelte component to display an estimated reading time

npm GitHub Workflow Status Codecov

Demo

🔴 LIVE DEMO :red_circle:

Example

Installation

yarn add @untemps/solid-readotron

Usage

Basic usage

<main>
	<Readotron selector=".text" />
	<section class="text">...</section>
</main>

API

Props Type Default Description
selector string (required) Selector of the element which contains the content to parse. See Selector
lang string 'default' Lang of the content. See Lang
template string '%time% min read' Display template which contains dynamic tokens to be replaced by the parsed values. See 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 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 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" 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

<main>
	<Readotron selector=".text" lang="en" />
	<section class="text">...</section>
</main>

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

<main>
	<Readotron selector=".text" template="Reading Time: %time% minutes (%words% words)" />
	<section class="text">...</section>
</main>

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

<main>
    <Readotron selector=".text">
      {(time, words, error) => (
      <Show when={!error} fallback={<span class='error'>Oops</span>}>
        <span class='readotron'>
          {time} min read ({words} words)
        </span>
      </Show>``
      )}
    </Readotron>
    <section class="text">
        ...
    </section>
</main>

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
  • Submit a Pull Request