🔗 A JavaScript library for generating responsive HTML link targets.
v1.3.2
- 😏 Zero-dependencies and extremely lightweight!
- 🦾 Written in TypeScript, allowing greater support for React, Angular, and other libraries!
- 💻 Full API available via public functions.
- ⭐ Default sizes consistent with Bootstrap: sm, md, lg, xl, xxl.
- 🌈 Set your own custom size attributes!
- 🎥 Toggling responsiveness on/off support.
- 📃 Auto fetch support (when HTML is added via 3rd party libraries).
All modern browsers (such as Google Chrome, FireFox, and Opera) are fully supported.
You can install the library with npm into your local modules directory using the following command:
npm install rink.jsOr, you can also use the following CDN links:
https://cdn.jsdelivr.net/gh/williamtroup/Rink.js@1.3.2/dist/rink.min.jsTo get started using Rink.js, do the following steps:
Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:
<!DOCTYPE html><script src="dist/rink.js"></script><a href="https://www.william-troup.com/" data-rink-js-sm="_blank" target="_self">Test Link SM</a>
<a href="https://www.william-troup.com/" data-rink-js-md="_blank" target="_self">Test Link MD</a>
<a href="https://www.william-troup.com/" data-rink-js-lg="_blank" target="_self">Test Link LG</a>
<a href="https://www.william-troup.com/" data-rink-js-xl="_blank" target="_self">Test Link XL</a>
<a href="https://www.william-troup.com/" data-rink-js-xxl="_blank" target="_self">Test Link XXL</a>
<a href="https://www.william-troup.com/" data-rink-js-800="_blank" data-rink-js-lg="_parent">Test Link (800, MD)</a>That's it! Nice and simple. Please refer to the code if you need more help (fully documented).
To customize, and get more out of Rink.js, please read through the following documentation.
Configuration options allow you to customize how Rink.js will function. You can set them as follows:
<script>
$rink.setConfiguration( {
defaultTarget: "self"
} );
</script>