https://github.com/morbidick/lit-element-notify
Small helpers for LitElement to dispatch change notifications and two-way binding
https://github.com/morbidick/lit-element-notify
lit-element webcomponents
Last synced: 5 months ago
JSON representation
Small helpers for LitElement to dispatch change notifications and two-way binding
- Host: GitHub
- URL: https://github.com/morbidick/lit-element-notify
- Owner: morbidick
- Created: 2018-09-18T08:47:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T16:41:12.000Z (almost 3 years ago)
- Last Synced: 2025-06-22T19:03:19.598Z (6 months ago)
- Topics: lit-element, webcomponents
- Language: JavaScript
- Homepage:
- Size: 358 KB
- Stars: 30
- Watchers: 1
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Change notification helpers for LitElement
[](https://www.npmjs.com/package/@morbidick/lit-element-notify)
Small helpers for LitElement to dispatch change notifications and two-way binding. For a comparison to PolymerElement and pure LitElement see [comparison section](docs/comparison.md) in the docs.
## Install
```bash
npm install @morbidick/lit-element-notify
```
## Notify mixin
Small mixin for LitElement to get easy change events via the `properties` getter.
This mixin adds the `notify` option to the property definition. Similar to the LitElement `attribute` option (which reflects a property to the dom) it fires an event as soon as the property value changes. The event name depends on the following conditions:
1. `notify: true`: the property gets lowercased and `-changed` is appended (note: contrary to PolymerElement and similar to LitElements attribute handling no camelCase to kebap-case conversion is done).
2. the notify option contains a string: `notify: 'success-event'` fires an event named `success-event`.
3. `notify: true` is set and the attribute option is a string (`attribute: 'attribute-name'`): the attribute name will be suffixed with `-changed`.
The updated value of the property is available in `event.detail.value`.
```javascript
import { LitElement, html } from 'lit-element';
import LitNotify from '@morbidick/lit-element-notify/notify.js';
class NotifyingElement extends LitNotify(LitElement) {
static get properties() {
return {
// property names get lowercased and the -changed suffix is added
token: {
type: String,
notify: true, // fires token-changed
},
camelCase: {
type: String,
notify: true, // fires camelcase-changed
},
// an explicit event name can be set
thing: {
type: String,
notify: 'success-event', // fires success-event
},
// if an attribute value is set, -changed is appended
myMessage: {
type: String,
attribute: 'my-message',
notify: true, // fires my-message-changed
},
};
}
}
```
## Sync directive
lit-html directive to synchronize an element property to a childs property, adding two-way binding to lit-element.
The directive takes two parameters, the property name and an optional event name on which to sync.
### Usage
```javascript
import { LitElement, html } from 'lit-element';
import LitSync from '@morbidick/lit-element-notify/sync.js';
class SyncElement extends LitSync(LitElement) {
// Syncing the child property `token` with the parent property `myProperty` when `token-changed`
// is fired or `myProperty` set.
render() { return html`
`}
// Syncing the child property `myMessage` with the event explicitly set to `my-message-changed`
// (mainly used to map from the camelCase property to the kebap-case event as PolymerElement does).
render() { return html`
`}
}
```