Getting Started
There are several ways to integrate Readmore.js into your project. Choose the one that best suits your needs.
Connecting via NPM
This is a convenient option for larger projects using NPM. NPM also makes it easy to update the library and manage your project dependencies, as well as integrate it into large JavaScript-based systems like React or Vue.js.
— In the command line, run:
$ npm i @corgras/readmore-js
— After installation, you can import the initReadMore function in your JavaScript file.
import { initReadMore } from '@corgras/readmore-js';
// Remaining code
— Then you can call initReadMore with the necessary parameters.
Manual Integration
This method allows you to add the file directly to your HTML code. Simply download the script, save it in your project folder, and link it to your document. This setup gives you full control over the script version you're using.
— Download the Readmore.js script files from GitHub
— After downloading the file to a designated folder on your site, link it to your HTML page. Insert the code below in the <head> section or before the closing </body> tag on your HTML page:
<script src="your_folder_path/readmore.min.js" defer></script>
The <script> tag uses the defer. attribute, ensuring the script runs after the HTML loads but before the DOMContentLoaded event.
— After linking, you need to initialize the script to make it work with selected elements on your page.
Connecting via CDN
The script can be loaded from a remote server, which significantly speeds up your website's loading time and eliminates the need to store it locally. Using a CDN provides access to cached versions of the script from different parts of the world. You can use one of the popular CDN services, such as jsDelivr or Unpkg.
— To connect, insert one of the lines of code below into the <head> section or before the closing </body> tag on your HTML page:
CDN jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/@corgras/readmore-js@1.0.0/readmore.min.js" defer></script>
CDN Unpkg:
<script src="https://unpkg.com/@corgras/readmore-js@1.0.0/readmore.min.js" defer></script>
The <script> tag uses the defer attribute. The script will be executed after the HTML is loaded but before the DOMContentLoaded event.
— After connecting, you need to initialize the script for it to start working with the selected elements on your page.