A simple read more / read less feature in vanilla js
npm install read-smore(cause read-more was already taken đ)
A customizable, lightweight vanilla JS plugin for truncating content with a Read more / Read less move, whilst preserving the original markup. Able to truncate by max word or character count.
1. đ Features
2. đ¯ Quickstart
3. đ§Ŧ Options
4. đ¤ Commands
5. đšī¸ Usage
6. đ Notes
7. đ
To Dos
- Super lightweight, no dependencies, vanilla js, es6.
- Supports truncating content by max word or character count.
- Define max word or characters via data attribute or option
- Adds ellipse after truncated content.
- Preserves existing markup (nice).
- Read more / Read less text is customizable, via option or data-attribute.
- Block level class name is customizable.
- Read More link can be inlined with truncated content, or as block level element below.
- No CSS deps, lib is 100% js.
- Hybrid NPM Module, supporting import and require
#### 1. Install from NPM
npm i read-smore
#### 2. Create markup with defined max words
`` Stuff and words and stuff and words. Words and stuff and words and stuff.
data-read-smore-words="70"
>
#### 3. Add JS and init
import ReadSmore from 'read-smore'// target all read more elements
const readMores = document.querySelectorAll('.js-read-smore')
// Init
ReadSmore(readMores).init()
Or, by require
const ReadSmore = require("read-smore");
const readMores = document.querySelectorAll(".js-read-smore");
ReadSmore(readMores).init();
Or, by CDN
To include via CDN, find the latest UMD version at https://unpkg.com/read-smore and inlcude via script tag, like so:
Then, initialize
const ReadSmore = window.readSmore// target all read more elements
const readMoreEls = document.querySelectorAll('.js-read-smore')
// Init
ReadSmore(readMoreEls).init()
đ§Ŧ Options
accepts a single options param, which supports the following properties:| Option | Type | Description | Default |
| -------------- | ------- | ----------------------------------------------------- | ------------ |
| blockClassName | String | BEM style block name for injected link template |
read-smore |
| lessText | String | 'Read Less' closer link text (if no data attribute) | Read more |
| moreText | String | 'Read More' expander link text (if no data attribute) | Read less |
| wordsCount | Number | Default max words (if no data attribute) | 30 |
| charsCount | Number | Default max characters (if no data attribute) | null |
| isInline | Boolean | Styles link text inline with content | false |
| linkElement | String | Change expander element | a |
đ¤ Project Commands
#### Install Project Deps
npm i#### Build
Builds
with microbundle to the various common js patterns.#### Run Dev
npm run devDev has microbundle begin watching / building the files, while also running the demo project via Parcel, which imports from the local src directory.
#### Run Demo
#### Lint
đšī¸ Usage
#### Init JS
import ReadSmore from 'read-smore'// target all read more elements with
class
const readMores = document.querySelectorAll('.js-read-smore')// Init
ReadSmore(readMores).init()
`#### Example by max word count
To truncate content by max word count, use the data attribute
with desired value.`
data-read-smore-words="70"
>
Stuff and words and stuff and words.
Words and stuff and words and stuff.
#### Example by max character count
To truncate content by max character count, use the data attribute
with desired value.`
data-read-smore-chars="150"
>
Stuff and words and stuff and words.
Words and stuff and words and stuff.
#### Example defining read more/less text via data attribute
To truncate content by max character count, use the data attribute
with desired value.`
data-read-smore-chars="150"
data-read-smore-more-text="Read Schmore"
data-read-smore-less-text="Read Schless"
>
Stuff and words and stuff and words.
Words and stuff and words and stuff.
#### Provide Options
ReadSmore supports a few options, such as editing the more/less text. See Options table below for more.
import ReadSmore from 'read-smore'const readMores = document.querySelectorAll('.js-read-smore')
const options = {
blockClassName: 'read-more',
moreText: 'Peep more',
lessText: 'Peep less'
}
// Pass in options param
ReadSmore(readMores, options).init()
#### Inline Read More link
You can have the Read More link appear inline with the ellipsed content, as opposed to below it.
Note: As of v2.2.0, required css dep was removed in favor of a pure js approach that simply applied inline styles.
1: Via
data-read-smore-chars="150"
data-read-smore-inline="true"
>
Stuff and words and stuff and words.
Words and stuff and words and stuff.
2: Via Option (effects all readSmore instances
const readMores = document.querySelectorAll('.js-read-smore')const options = {
isInline: true
}
const RMs = ReadSmore(readMores, options)
đ Notes
- Need to figure out how to handle ReadMore instances with ajaxed/Fetched in content, since the word count on existing instances will be already truncated.
- Thinking the solution is to destroy and rebuild via a click event. Or, at least open all and rebuild on click.
đ
To Dos
- ~~Overhaul and simplfiy API to be more plugin / module like~~
- ~~Rename everything to 'ReadSmore'~~
- ~~Add docs / demo pages via gh-pages~~
- ~~Bundle as Hybrid NPM Module to support
and require`~~