# cytoscape-css-variables

> [![Example Link](./docs/example.jpg)](https://cytoscape-css-variables.netlify.app/)

Latest version **0.1.4** (published 2021-05-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install cytoscape-css-variables
pnpm add cytoscape-css-variables
yarn add cytoscape-css-variables
bun add cytoscape-css-variables
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2021-05-31 |
| First published | 2020-10-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 28.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Luke Secomb |
| Maintainers | lukethecoder |

## Links

- npm: https://www.npmjs.com/package/cytoscape-css-variables
- Repository: https://github.com/lukethacoder/cytoscape-css-variables
- npm.io page: https://npm.io/package/cytoscape-css-variables

## Recent versions

- 0.1.4 (latest) — 2021-05-31
- 0.1.3 — 2020-10-03
- 0.1.2 — 2020-10-03
- 0.1.1 — 2020-10-03

## README

<h1 align="center"> cytoscape-css-variables </h1>
<br>
<p align="center">
  <a href="https://cytoscape-css-variables.netlify.app/">
    <img alt="cytoscape.js-css-variables" title="cytoscape.js-css-variables" src="./docs/logo.png" width="450">
  </a>
</p>
<p align="center">
  Add CSS Variable functionality to Cytoscape graphs
</p>

## 🎨 Example

[![Example Link](./docs/example.jpg)](https://cytoscape-css-variables.netlify.app/)

## 📦 Install

Download the library:
 * via npm: `npm install cytoscape-css-variables`,
 * via unpkg: `https://unpkg.com/cytoscape-css-variables/dist/cytoscape-css-variables.js`

Import the library as appropriate for your project:

ES import:

```js
import cytoscape from 'cytoscape';
import cssVars from 'cytoscape-css-variables';

cytoscape.use( cssVars );
```

CommonJS require:

```js
let cytoscape = require('cytoscape');
let cssVars = require('cytoscape-css-variables');

cytoscape.use( cssVars ); // register extension
```

AMD:

```js
require(['cytoscape', 'cytoscape-css-variables'], function( cytoscape, cssVars ){
  cssVars( cytoscape ); // register extension
});
```

Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed.


## 🔥 API

```javascript
// core cytoscape instance
let cy

// cssVars extension instance
let css_vars

// Can't call css_vars before it is initiated, so declaring the function here
const getVar = (variable) => (css_vars ? css_vars.getVar(variable) : null)

cy = cytoscape({
  container: document.getElementById('cy'),
  style: [
    {
      selector: 'node',
      style: {
        // Use getVar() with the css variable name to use it
        // - this can be used for more than just colors
        // - getVar() here is a local function, NOT the extension function
        'background-color': () => getVar('--theme-primary'),
      },
    },
  ],
  // your array elements go here
  elements: [],
})

// cssVars takes two (optional) values,
// initialVars object and the domEl to assign the vars to/from
cy.cssVars({
  initialVars: {
    '--theme-primary': 'rgb(245, 204, 0)',
    '--theme-secondary': 'rgb(0, 8, 20)',
    '--theme-tertiary': 'rgb(234,84,85)',
    '--cy-node-size': 30,
  },
  domEl: document.body,
})

// no updates will be made until update() is called (even on init)
// this allows you to bulk change css vars but only run one update
// NOTE: this will need to be run after any set of set/get/remove functions
css_vars.update()

// assigns a value to a variable
css_vars.setVar('--theme-primary', 'rgb(245, 204, 0)')

// removes a variable and its value by the variable name
css_vars.removeVar()

// returns an object of css variables and their values
// will match the initialVars object to be passed in on init
css_vars.getVars()

// bulk add variables
// will match the initialVars object to be passed in on init
css_vars.addVars()

// removes all variables and their values
css_vars.resetVars()

// sets the current active DOM element
css_vars.setDomEl()

```

## 📢 Publishing

> Make sure you have [np](https://github.com/sindresorhus/np) installed

1. Commit changes to Github
2. Run `yarn publish`
3. Profit 💰

---
_Source: https://npm.io/package/cytoscape-css-variables · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._