Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ryangjchandler/alpine-parent

Adds a handy $parent magic property to your Alpine components.
https://github.com/ryangjchandler/alpine-parent

Last synced: 2 months ago
JSON representation

Adds a handy $parent magic property to your Alpine components.

Host: GitHub
URL: https://github.com/ryangjchandler/alpine-parent
Owner: ryangjchandler
License: mit
Created: 2022-02-22T17:05:52.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2022-02-22T17:14:44.000Z (almost 3 years ago)
Last Synced: 2024-10-21T04:27:48.593Z (3 months ago)
Language: JavaScript
Size: 110 KB
Stars: 18
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Awesome Lists containing this project

README

        > ✨ Help support the maintenance of this package by [sponsoring me](https://github.com/sponsors/ryangjchandler).

# Alpine `$parent`

Access parent components using a handy `$parent` magic variable.

![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/ryangjchandler/alpine-parent?label=version&style=flat-square)

![Build size Brotli](https://img.badgesize.io/ryangjchandler/alpine-parent/main/dist/cdn.min.js.svg?compression=gzip&style=flat-square&color=green)

[![Monthly downloads via CDN](https://data.jsdelivr.com/v1/package/npm/@ryangjchandler/alpine-parent/badge)](https://www.jsdelivr.com/package/npm/@ryangjchandler/alpine-parent)

> This package only supports Alpine v3.x.

## About

This plugin provides a new `$parent` magic property that allows you to interact with a parent component's data object directly. This is useful when you have nested components and conflicting property names but would still like to access the parent properties / methods directly.

## Installation

### CDN

Include the following `` tag in the `<head>` of your document, just before Alpine.

```html

<script

    src="https://cdn.jsdelivr.net/npm/@ryangjchandler/[email protected]/dist/cdn.min.js"

    defer

>

```

### NPM

```bash

npm install @ryangjchandler/alpine-parent

```

Add the `$parent` directive to your project by registering the plugin with Alpine.

```js

import Alpine from "alpinejs";

import Parent from "@ryangjchandler/alpine-parent";

Alpine.plugin(Parent);

window.Alpine = Alpine;

window.Alpine.start();

```

## Usage

Access the `$parent` property in your component:

```html



    

        My value is  and my parent's value is 

    



```

The `$parent` property returns a `Proxy`, so any updates to the properties should be reactive. This means you'll be able to use it inside of `x-model`, etc.

## Versioning

This projects follow the [Semantic Versioning](https://semver.org/) guidelines.

## License

Copyright (c) 2021 Ryan Chandler and contributors

Licensed under the MIT license, see [LICENSE.md](LICENSE.md) for details.