# define-state

> Define stateful property on an object

Latest version **1.1.1** (published 2022-02-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install define-state
pnpm add define-state
yarn add define-state
bun add define-state
```

## 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.1.1 |
| Published | 2022-02-16 |
| First published | 2015-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 3.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Deema Ywanov |
| Maintainers | dfcreative |
| Keywords | state, st8, stateful, defineProperty, object |

## Links

- npm: https://www.npmjs.com/package/define-state
- Repository: https://github.com/dfcreative/define-state
- Issues: https://github.com/dfcreative/define-state/issues
- npm.io page: https://npm.io/package/define-state

## Dependencies (1)

- [st8](https://npm.io/package/st8.md) ^2.1.0

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.1.1 (latest) — 2022-02-16
- 1.1.0 — 2015-04-28
- 1.0.1 — 2015-04-20
- 1.0.0 — 2015-04-11

## README

# define state

**DEPRECATION NOTICE**

Just use [st8](https://ghub.io/st8) directly as:

```js
import State from 'st8'

var state = new State({
	a(){
		// onenter
		this === target //true
	},
	
	b(){
		// onenter
		this === target //true
		return () => {
			// onexit
		}
	}
	
}, target);

Object.defineProperty(target, property, {
	set: function (value) {
		return state.set(value);
	},
	get: function () {
		return state.get();
	}
});
```

---

Define stateful property on class instance or any object. Behaves like `defineProperty`, but defines a state.

`$ npm install define-state`

```js
var defineState = require('define-state');

function MyComponent (el) {
	this.el = el;

	//define state on instance
	defineState(this, 'state', this.state);

	//go to initial state
	this.state = true;
}

//state declaration
MyComponent.prototype.state = {
	true: {
		before: function () {
			this.el.innerHTML = 'Hello world!';
		}
	}
}

//create instance
new MyComponent(document.querySelector('#hello'));
```


## API

### defineState(target, name, state, isFn?)

Define stateful property `name` on a `target` according to the `state` declaration (see [st8 API](http://npmjs.org/package/st8#API)). Pass optional `isFn` argument to define functional accessor instead of getter/setter, might be useful for IE8/ES3 environments or to define functional-style components, like [dialog](https://github.com/component/dialog).

```js
defineState(target, 'visible', {
	true: function () {
		this.removeAttribute('hidden');
	},
	false: function () {
		this.setAttribute('hidden', true);
	}
}, true);

target.visible(false);
```


[![NPM](https://nodei.co/npm/define-state.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/define-state/)

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