Getting Started

ReadMore.js can be integrated into your project in several ways. Choose the method that best suits your needs, depending on your project type and tools used.

Using NPM Node.js / CommonJS ES Module Install Manually Using CDN

Installation via NPM

This method is ideal for projects using the npm package manager. Installing via NPM simplifies dependency management, library updates, and integration with modern JavaScript frameworks like React, Vue.js, or Angular.

— Run the following command in your terminal:


					$ npm i @corgras/readmore-js

— After installation, include the script in your project. For example, add it to your HTML file:


					<script src="./node_modules/@corgras/readmore-js/readmore.min.js" defer></script>

The defer attribute ensures the script executes after the DOM is fully loaded, improving performance.

Using in Node.js / CommonJS

For projects using CommonJS (e.g., in Node.js or with tools like Webpack), you can import the main ReadMore.js function after installing via NPM.

— Add the following code to your JavaScript file:


					const initReadMore = require('@corgras/readmore-js');
					// Initialization: initReadMore('.selector', { /* options */ });

Using as an ES Module

For modern projects using ES modules (e.g., with Vite, Rollup, or modern versions of Webpack), import ReadMore.js as a module after installing via NPM.

— Add the following code to your JavaScript file:


					import initReadMore from '@corgras/readmore-js';
					// Initialization: initReadMore('.selector', { /* options */ });

— Example of inclusion with module type:


					<script type="module">
						import initReadMore from './node_modules/@corgras/readmore-js/readmore.min.js';
						initReadMore('.content', { collapsedHeight: 200 });
					</script>

Important

Ensure your HTML file includes the type="module" attribute in the <script> tag if you are including the script directly.

Install Manually

If you are not using package managers, you can include ReadMore.js by manually downloading the script file. This method provides full control over the library version and does not rely on external tools.

— Download the latest version of readmore.min.js from the official GitHub repository

— Place the downloaded file in your project folder (e.g., /js/).

— Include the script in your HTML file by adding the following code in the <head> section or before the closing </body> tag:


					<script src="path_to_your_folder/readmore.min.js" defer></script>

The defer attribute ensures the script executes after the DOM is loaded, avoiding page rendering delays.

— After inclusion, initialize the script by calling the initReadMore. function. Learn more about initialization in the initialization section.

Inclusion via CDN

Using a CDN (Content Delivery Network) allows you to quickly include ReadMore.js without storing files locally. CDNs provide fast loading through caching and a global server network.

— Add one of the following scripts to the <head> section or before the closing </body> tag:

CDN jsDelivr:


					<script src="https://cdn.jsdelivr.net/npm/@corgras/readmore-js/readmore.min.js" defer></script>

CDN Unpkg:


					<script src="https://unpkg.com/@corgras/readmore-js/readmore.min.js" defer></script>

— After inclusion, initialize the script as described in the initialization section.