Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
iro-dynamic-css
Advanced tools
iro-dynamic-css
iro.js plugin to dynamically update CSS rules whenever the selected color changes
iro-dynamic-css
An iro.js plugin that dynamically updates CSS styles to match the currently selected color
Features | Installation | Usage | Stylesheet API
Features
- Tiny: Just 4kb minified, or less than 1kB minified + gzipped.
- Consistent: Works across all modern browsers, down to IE 9.
- CSS Variables: CSS variables are available in browsers that support them.
Installation
Install with NPM
$ npm install iro-dynamic-css --save
If you are using a module bundler like Webpack or Rollup, import iro-dynamic-css into your project after iro.js:
Using ES6 modules:
import iro from '@jaames/iro';
import iroDynamicCss from 'iro-dynamic-css';
Using CommonJS modules:
const iro = require('@jaames/iro');
const iroDynamicCss = require('iro-dynamic-css');
Download and host yourself
Development version
Uncompressed at around 12kB, with source comments included
Production version
Minified to 4kB
Then add it to the <head> of your page with a <script> tag after iro.js:
<html>
<head>
<!-- ... -->
<script src="./path/to/iro.min.js"></script>
<script src="./path/to/iro-dynamic-css.min.js"></script>
</head>
<!-- ... -->
</html>
Using the jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/iro-dynamic-css/dist/iro-dynamic-css.min.js"></script>
Usage
Register Plugin
After both iro.js and iro-dynamic-css have been imported/downloaded, the plugin needs to be registered with iro.use:
iro.use(iroDynamicCss);
Global Plugin Options
Global config options can optionally be passed to the second parameter of iro.use.
The only current option is throttle, which can be used to limit how regularly the CSS rules are updated. The value passed to throttle is the minimum time between CSS updates in milliseconds. You can read more about throttling here
Since the color picker updates the selected color very quickly, throttling stylesheet updates can be helpful to reduce lag if you are changing a lot of styles at once.
iro.use(iroDynamicCss, {
// Only allow the css to update once in 100 milliseconds
throttle: 100
});
ColorPicker Setup
The plugin adds a new css config option to iro.ColorPicker, dynamic CSS rules can be passed to this option as a CSS "template" formatted as a JavaScript object.
var colorPicker = new iro.ColorPicker([
width: 320,
color: {r: 255, g: 100, b: 100},
// ... etc
css: {
'body': {
'background-color': '$color'
},
'input, button': {
'border-color': '$color',
'color': '$color'
}
}
])
$color is treated as a variable representing the currently selected color. To demonstrate, let's say the currently selected color is rgb(255, 0, 0). Using the template above, the CSS applied to the page would look something like this:
body {
background-color: rgb(255, 0, 0);
}
input, button {
border-color: rgb(255, 0, 0);
color: rgb(255, 0, 0);
}
CSS Variables
CSS variables can also be used, provided that the browser supports them. Variables are defined using properties that begin with a double-dash (--).
var colorPicker = new iro.ColorPicker([
width: 320,
color: {r: 255, g: 100, b: 100},
// ... etc
css: {
':root': {
'--selected-color': '$color'
}
}
])
By adding the variables to the :root psuedo-class, we ensure that they are globally accessible so you can reference them anywhere in your project's CSS:
.example {
background-color: var(--selected-color);
}
Stylesheet API
Each colorPicker has its own stylesheet, accessible from its stylesheet property. After the plugin is registered, the stylesheet constructor is also available globally on iro.Stylesheet().
Properties
enabled
Boolean indicating whether this stylesheet's rules should be applied to the page. This is readable/writable, and defaults to true.
css
The current CSS rules formatted as a JavaScript object. For example:
"body": {
"background-color": "red"
},
".example": {
"border": "1px solid red"
}
cssText
The current CSS rules formatted as a CSS string. For example:
body {
background-color: red;
}
.example: {
border: 1px solid red;
}
sheet
A reference to the stylesheet's CSSStyleSheet object.
rules
A reference to the stylesheet's CSSRuleList object.
Methods
setRule
Adds or updates a CSS rule.
Arguments:
{String}selector{String}property{String}value
Example:
var stylesheet = new Stylesheet();
// Set the background of all elements with the CSS class 'example' to red
stylesheet.setRule('.example', 'background', '#f00');
FAQs
iro.js plugin to dynamically update CSS rules whenever the selected color changes
We found that iro-dynamic-css 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.
Package last updated on 12 Mar 2019
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.
Related posts
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah Gooding - Nov 26, 2024