# domkit

> Toolkit for DOM

Latest version **0.0.3** (published 2019-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install domkit
pnpm add domkit
yarn add domkit
bun add domkit
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2019-09-02 |
| First published | 2015-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 59 |
| Author | Yuanyan Cao |
| Maintainers | yuanyan |
| Keywords | dom, domkit, toolkit |

## Links

- npm: https://www.npmjs.com/package/domkit
- Repository: https://github.com/yuanyan/domkit
- Homepage: https://github.com/yuanyan/domkit#readme
- Issues: https://github.com/yuanyan/domkit/issues
- npm.io page: https://npm.io/package/domkit

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2019-09-02
- 0.0.2 — 2019-08-31
- 0.0.1 — 2015-12-11

## README

# DOM Kit
> Toolkit for DOM

```
npm install domkit --save
```

## insertKeyframesRule

```js
var insertKeyframesRule = require('domkit/insertKeyframesRule');
var keyframes = {
  '0%': {
    transform: 'scale(1)'
  },
  '50%': {
    transform: 'scale(0.5)',
    opacity: 0.7
  },
  '100%': {
    transform: 'scale(1)',
    opacity: 1
  }
};

var animationName = insertKeyframesRule(keyframes);
```

## insertRule

```js
var insertRule = require('domkit/insertRule');
var css = '.foo {}'
insertRule(css);
```

## appendVendorPrefix

```js
var appendVendorPrefix = require('domkit/appendVendorPrefix');
var style = {
  transform: 'scaleX(1)'
}
appendVendorPrefix(style);
```

## getVendorPrefix

```js
var getVendorPrefix = require('domkit/getVendorPrefix');
var vendorPrefix = getVendorPrefix(); // => -webkit-
```

## addClass

```js
var addClass = require('domkit/addClass');
addClass(this.getDOMNode(), 'foo');
```

## removeClass

```js
var removeClass = require('domkit/removeClass');
removeClass(this.getDOMNode(), 'foo');
```

## hasClass

```js
var hasClass = require('domkit/hasClass');
hasClass(this.getDOMNode(), 'foo'); // => true
```

## transitionEventsa

```js
var transitionEvents = require('domkit/transitionEvents');
transitionEvents.addEndEventListener(node, eventListener);
transitionEvents.removeEndEventListener(node, eventListener);
```

## classNames

```js
var classNames = require('domkit/classNames');

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }) // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

// Arrays will be recursively flattened as per the rules above:
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'
```

## canUseDOM

```js
var canUseDOM = require('domkit/canUseDOM');
if(canUseDOM){
  // balabala
}
```

## addEventListener

```js
var addEventListener = require('domkit/addEventListener');
addEventListener(window, 'scroll', handle)
```

## removeEventListener
```js
var removeEventListener = require('domkit/removeEventListener');
removeEventListener(window, 'scroll', handle)
```

## throttle
```js
var throttle = require('domkit/throttle');
throttle(fn, 100)
```

## onEndTransition
```js
var onEndTransition = require('domkit/onEndTransition');
onEndTransition(el, handle)
```

## inViewport
```js
var inViewport = require('domkit/inViewport');
inViewport(el) // true if elem is in the current viewport
inViewport(el, 100) // true if elem is in the current viewport or within 100px of it
inViewport(el, -100) // true if elem is in the current viewport and not within 99px of the edge
```

## Browser Support

![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
--- | --- | --- | --- | --- |
IE 6+ ✔ | Chrome 4.0+ ✔ | Firefox 16.0+ ✔ | Opera 15.0+ ✔ | Safari 4.0+ ✔ |

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