Inkr is a (yet another) Material Design ink ripples script for HTML.
(This project is essentially a pure-JS port of legitRipple, with some extra stuff added in.)
Inkr is known to support the following browsers:
These ratings are all based off the bundled version.
If you want to report another browser Inkr works in, feel free to open an issue stating which browser (and version).
Inkr will not support Internet Explorer or any archaically outdated browser. Ever.
In HTML
<html>
<head>
<!-- ... -->
<!-- This isn't needed if using a bundled version of inkr, as it will auto-inject its CSS.-->
<style rel="stylesheet" href="inkr.css">
<!-- ... -->
</head>
<body>
<!-- ... -->
<script src="inkr.js"></script>
</body>
</html>
Though NPM
$ npm install inkr
# or
$ yarn add inkr
If you don't like supidly worded and confusing examples, you can see the pure API docs here.
The simplest usage of Inkr is done by just passing stuff to inkr().
This can either be a query selector, an element, or a mixed array of query selectors and elements.
Query Selector
inkr('.cool-class');
Element
inkr(document.getElementById('my-very-special-element'));
Mixed List of Both
let arrayOfCoolStuff = ['.cool-class', document.getElementById('very-cool-id'), document.getElementsByClassName('very-cool-elements')];
// Inkr shallow flattens arrays as a result of being able to take in a list of query selectors.
inkr(arrayOfCoolStuff);
You can also pass various options as listed here, to Inkr through the second argument.
inkr('.cool-class', {
maxDiameter: '250px'
});
If the script tag importing Inkr does not have the data-no-init attribute, Inkr will automatically find any elements that have the inkr class, and apply itself to them. It will also watch the DOM for future additions of elements with the inkr class.
If you've disabled auto init of Inkr with the attribute, you can use inkr.autoInit to apply Inkr to elements of your choosing (defaulting to any with the inkr class), and then have it watch the DOM and automatically apply Inkr to any dynamically added/edited elements that get the inkr class.
In the future you may be able to specify a selector to pass to inkr.watchDOM however it is currently not implemented. (You can always pull request it of course 😉)
<!--Disables auto application of inkr-->
<script src="inkr.js" data-no-init></script>
<script>
let el = document.createElement('div');
el.classList.add('inkr');
el.classList.add('my-fancy-class');
inkr.autoInit('.my-elements');
document.body.appendChild(el);
</script>
You can also make Inkr not automatically watch for DOM updates by adding {watchDOM: false} as the second argument to inkr.autoInit(). Extra options get passed as {options: {...}} in the second argmument.
let el = document.createElement('div');
el.classList.add('inkr');
inkr.autoInit('.my-elements', {watchDOM: false});
document.body.appendChild(el); // Won't get Inkr applied to it.
And if you've already ran Inkr on elements you want, and you wish to watch the DOM, you can call inkr.watchDOM by yourself.
inkr.watchDOM({
maxDiameter: '250px';
...
});
If you need to remove Inkr from elements, you can call inkr.destroy (aliased to inkr.remove) with a set of elements you wish to remove it from (same style as when applying Inkr). If you don't give it any elements, it'll default to removing it from all elements that have had Inkr applied to it, that is, any elements with the data-isinked attribute, which is automatically applied by Inkr.
inkr.destroy();
// or
inkr.destroy('.my-cool-elements');
Since Inkr uses ES6 syntax and ES6 modules, you'll need to build it in order to use it properly on most browsers. To do this, all you gotta do is:
Install the dependencies: (these are just dev dependencies as the main library doesn't actually need these)
$ npm install
# or
$ yarn
And then run the NPM build script:
$ npm run build
# or
$ yarn build
This will lint, bundle, and minify Inkr, and then output it in dist/.
FAQs
Yet another Material Design ink ripples script for JS.
The npm package inkr receives a total of 0 weekly downloads. As such, inkr popularity was classified as not popular.
We found that inkr demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.