# settingizer

> Create settings pages from JavaScript objects

Latest version **1.14.3** (published 2020-05-01) · UNLICENSED license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.14.3 |
| Published | 2020-05-01 |
| First published | 2018-12-01 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 235.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Marty Rutherford Boggs Jr. |
| Maintainers | martyboggs |
| Keywords | settings, front-end |

## Links

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

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.14.3 (latest) — 2020-05-01
- 1.14.2 — 2020-05-01
- 1.14.1 — 2020-04-29
- 1.14.0 — 2020-04-29
- 1.13.5 — 2020-04-26
- 1.13.4 — 2020-04-23
- 1.13.3 — 2020-04-22
- 1.13.2 — 2020-04-22
- 1.13.1 — 2020-04-22
- 1.13.0 — 2020-04-22
- 1.12.0 — 2020-04-22
- 1.11.5 — 2020-04-22
- 1.10.1 — 2018-12-30
- 1.10.0 — 2018-12-29
- 1.9.4 — 2018-12-29
- … 44 more at https://npm.io/package/settingizer/versions

## README

# Settingizer
Include the CSS and JS files in your project:

`<link rel="stylesheet" href="/settingizer/dist/settingizer.css" />`

`<script src="/settingizer/dist/settingizer.js"></script>`

Create settings pages from JS objects.

`create_settings(data);`

Omitting the second argument will make it ask you lots of questions and build a model of your data to be used as the config.

Use the config as the second argument in production:

`create_settings(data, config);`

The data and config properties will both be used to generate settings. If the data and config are out of sync, there will be a warning in the console with information about which properties are out of sync.

`<div class="settingizer"></div>`

Add a `div` with the `settingzer` class. If no element is found, the settings will be added to the `<body>`.

## Config Properties

Your config will be generated with a schema of your data and the answers to the questions it asks in the following properties: sc_show, sc_type, sc_description, sc_add, sc_grid. The rest of the properties can be added to the config manually.


| Property | Default | Description |
| --- | --- | --- |
| sc_action | '' | Define the action attribute of the form element |
| sc_method | '' | Define the method attribute of the form element |
| sc_show | true | Show/hide some property. |
| sc_type | '' | Choose the type of data. Accepts select, buttons, radios, checkboxes, grid, button. If there's an array of arrays with equal length, you can create a grid. |
| sc_options | [] | This is used to list all options, including unselected ones, for dropdowns, buttons, radios, checkboxes etc. |
| sc_description | '' | Description text shows below the value area. |
| sc_add | false | Let users add more array elements. |
| sc_theme | '' | Only to be used at the root. Choose a custom style for the options. Accepts: 'shopify' or 'dark' |
| sc_readonly | '' | readonly attribute |
| sc_placeholder | '' | placeholder attribute |
| sc_required | '' | required attribute |
| sc_link | '' | clicking an element will redirect to this url. Use the &ast;&#124;property&#124;&ast; variable to put a value from the parent item into the url, e.g. `{sc_link: '/?id=*|id|*'}`
| sc_button_text | '' | text for button type |
| sc_label | 'Capitalized Property' | Custom text for label. Set to false to hide the label. |

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