Configure and generate code snippet for custom element
[![tippin.me][tippin-me-badge]][tippin-me-url]
[![Follow me][follow-me-badge]][follow-me-url]
[![Version][version-badge]][version-url]
[![lit-element][lit-element-version-badge]][lit-element-url]
[![Node version][node-version-badge]][node-version-url]
[![MIT License][mit-license-badge]][mit-license-url]
[![Downloads][downloads-badge]][downloads-url]
[![Total downloads][total-downloads-badge]][downloads-url]
[![Packagephobia][packagephobia-badge]][packagephobia-url]
[![Bundlephobia][bundlephobia-badge]][bundlephobia-url]
[![CircleCI][circleci-badge]][circleci-url]
[![Dependency Status][daviddm-badge]][daviddm-url]
[![codebeat badge][codebeat-badge]][codebeat-url]
[![Codacy Badge][codacy-badge]][codacy-url]
[![Code of Conduct][coc-badge]][coc-url]
> Better element for the web
## Table of contents
- [Pre-requisites](#Pre-requisites)
- [Installation](#Installation)
- [Usage](#Usage)
- [Browser compatibility](#Browser-compatibility)
- [API Reference](#API-Reference)
- [Demo](#Demo)
- [License](#License)
## Pre-requisites
- [Java 8][java-url] _(`web-component-tester` works without any issue with Java 8)_
- [Node.js][nodejs-url] >= 8.16.0
- [NPM][npm-url] >= 6.4.1 ([NPM][npm-url] comes with [Node.js][nodejs-url], no separate installation is required.)
- (Optional for non-[VS Code][vscode-url] users) [Syntax Highlighting for lit-html in VS Code][vscode-lit-html-url]
- [web-component-tester][web-component-tester-url] >= 6.9.2 (For running tests, it's recommended to install globally on your system due to its insanely huge install size by running `npm i -g web-component-tester`.)
## Installation
```sh
# Install via NPM
$ npm install @reallyland/really-code-configurator
```
## Usage
**properties.config.ts**
```ts
import { PropertyValue } from '@reallyland/really-code-configurator';
const properties: PropertyValue[] = [
{
name: 'propertyString',
value: 'property',
type: 'string',
},
{
name: 'propertyNumber',
value: 0,
type: 'number',
},
{
name: 'propertyBoolean',
value: true,
type: 'boolean',
},
{
name: 'propertyWithSelectableOptions',
value: 'option-1',
type: 'string',
options: [
{
label: 'option-1',
value: 'option-1',
},
{
label: 'option-2',
value: 'option-2',
},
{
label: 'option-3',
value: 'option-3',
},
],
},
];
const cssProperties: PropertyValue[] = [
{
name: '--test-property-width',
value: '2px',
}
];
export { properties, cssProperties };
```
**index.html**
```html