Getting Started

Readmore.js can be integrated into your project in several ways. Choose the one that best suits your needs, depending on the type of project and the tools you are using.

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 such as 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.

— If you are using a module system, import the library in your JavaScript code (see sections below).

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 */ });

Ensure your project is configured to work with CommonJS modules.

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 */ });

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

— Example of including with module type:


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

Manual Inclusion

If you are not using package managers, you can include Readmore.js by manually downloading the script file. This method gives you 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.

Including via CDN

Using a CDN (Content Delivery Network) allows you to quickly include Readmore.js without locally storing files. CDNs provide fast loading speeds due to 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>

Without specifying a version, the latest one will be loaded.

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