https://github.com/kodie/kloner

A tiny, dependency-free JavaScript module for cloning/repeating elements.
https://github.com/kodie/kloner

clone dynamic frontend javascript repeater vanilla-js

Last synced: about 2 months ago
JSON representation

A tiny, dependency-free JavaScript module for cloning/repeating elements.

• Host: GitHub
• URL: https://github.com/kodie/kloner
• Owner: kodie
• License: mit
• Created: 2023-03-27T17:07:50.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-01T22:28:03.000Z (almost 2 years ago)
• Last Synced: 2024-04-17T04:06:48.499Z (9 months ago)
• Topics: clone, dynamic, frontend, javascript, repeater, vanilla-js
• Language: JavaScript
• Homepage: http://kloner.js.org/
• Size: 114 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license.md

Awesome Lists containing this project

README

        
# kloner

[![npm package version](https://img.shields.io/npm/v/kloner.svg?style=flat-square)](https://www.npmjs.com/package/kloner)

[![Travis build status](https://img.shields.io/travis/com/kodie/kloner.svg?style=flat-square)](https://travis-ci.com/kodie/kloner)

[![npm package downloads](https://img.shields.io/npm/dt/kloner.svg?style=flat-square)](https://www.npmjs.com/package/kloner)

[![code style](https://img.shields.io/badge/code_style-standard-yellow.svg?style=flat-square)](https://github.com/standard/standard)

[![license](https://img.shields.io/github/license/kodie/kloner.svg?style=flat-square)](license.md)

A tiny, dependency-free JavaScript module for cloning/repeating elements.

**Note: This module is in beta and the documentation is incomplete.**

## Demo

Visit https://kloner.js.org

## Installation

### Manual Download

Download [dist/kloner.min.js](dist/kloner.min.js) and place the following HTML in your page's head element:

```html

```

### CDN (Courtesy of [jsDelivr](https://jsdelivr.com))

Place the following HTML in your page's head element (check to make sure the version in the URL is the version you want):

```html

```

### [NPM](https://npmjs.com)

```

npm install kloner --save

```

```js

// ES6

import kloner from 'kloner'

// CommonJS

const kloner = require('kloner')

```

### [GPM](https://github.com/itsahappymedium/gpm)

```

gpm install kodie/kloner --save

```

### [Bower](https://bower.io)

```

bower install kodie/kloner --save

```

## Usage

### `kloner` Function

`kloner([containerSelector], [childSelector], [options])`

Initializes kloner.

#### Parameters

 - `containerSelector` (Optional) - 

 

 - `childSelector` (Optional) - 

 - `options` (Optional) - 

#### Examples

```js

window.addEventListener('load', function () {

  kloner()

})

```

#### Options

```js

{

  afterAdd: null,

  afterChildUpdate: null,

  afterRemove: null,

  beforeAdd: null,

  beforeChildUpdate: null,

  beforeRemove: null,

  childSelector: '[data-kloner-template], :scope > *',

  containerSelector: '[data-kloner], .kloner',

  max: null,

  min: 0,

  parameters: null,

  start: 0,

  template: null,

  updateChildren: false

}

```

## Related

 - [filebokz](https://github.com/kodie/filebokz) - A tiny, dependency-free, highly customizable and configurable, easy to use file input with some pretty sweet features.

 - [growfield](https://github.com/kodie/growfield) - A tiny, dependency-free JavaScript module for making textarea elements grow with their content.

 - [hashjump](https://github.com/kodie/hashjump) - A tiny, dependency-free JavaScript module for handling anchor links and scrolling elements into view.

 - [kolorfield](https://github.com/kodie/kolorfield) - A tiny, dependency-free, color input field helper that utilizes the native color picker.

 - [minitaur](https://github.com/kodie/minitaur) - The ultimate, dependency-free, easy to use, JavaScript plugin for creating and managing modals.

 - [peekfield](https://github.com/kodie/peekfield) - A dependency-free, easy to use, JavaScript plugin for hiding and showing fields.

## License

MIT. See the [license file](license.md) for more info.