avalynx/avalynx-ref

AvalynxRef is a Ref implementation for updating elements with a value like React's Ref or Vue's Ref.

0.0.3 2024-05-30 11:36 UTC

MIT

• Juergen Schwind an the AvalynxRef authors

• react
• vue
• ref
• avalynx

README

AvalynxRef is an implementation of a reference (Ref) system, similar to Refs in React or Vue, designed for updating DOM elements with a specified value. This facilitates a reactive linkage between JavaScript data and the user interface.

Features

• Lightweight: AvalynxRef is a lightweight library that doesn't require any dependencies.
• Ref System: Use Refs to update DOM elements with a specified value.

Example

Here's a simple example of how to use AvalynxRef in your project:

• Overview
• Random values

Installation

To use AvalynxRef in your project, you can directly include it in your HTML file.

Include AvalynxRef:

<script src="path/to/avalynx-ref.js"></script>

Replace path/to/avalynx-ref.js with the actual path to the file in your project.

Installation via jsDelivr (Link)

AvalynxRef is also available via jsDelivr. You can include it in your project like this:

<script src="https://cdn.jsdelivr.net/npm/avalynx-ref@0.0.3/dist/js/avalynx-ref.min.js"></script>

Installation via NPM (Link)

AvalynxRef is also available as a npm package. You can add it to your project with the following command:

npm install avalynx-ref

After installing, you can import AvalynxRef into your JavaScript file like this:

import { AvalynxRef } from 'avalynx-ref';

Installation via Symfony AssetMapper

php bin/console importmap:require avalynx-ref

After installing, you can import AvalynxRef into your JavaScript file like this:

import { AvalynxRef } from 'avalynx-ref';

Installation via Composer (Link)

AvalynxRef is also available as a Composer package. You can add it to your project with the following command:

composer require avalynx/avalynx-loader

After installing, you can import AvalynxLoader into your HTML file like this:

<script src="vendor/avalynx/avalynx-loader/dist/js/avalynx-loader.js"></script>

Usage

To use AvalynxRef in your project, include the AvalynxRef JavaScript file in your project and initialize the class with the appropriate selector.

const myRef = new AvalynxRef("#myElement");
myRef.value = "Updated content";

or use the isHtml option to treat the value as HTML:

const myRef = new AvalynxRef("#myElement", { isHtml: true });
myRef.value = "<p>Updated content</p>";

Options

AvalynxRef allows the following options for customization:

• selector: (string) The selector to use for targeting tables within the DOM (default: '.avalynx-ref').
• options: An object containing the following keys:
  • isHtml: (boolean) Treat the value as HTML (default: false).

Planned Features

• callback function for value change

Contributing

Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:

• Bug fixes
• Feature enhancements
• Documentation improvements

Before submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.

License

AvalynxRef is open-sourced software licensed under the MIT license.

Contact

If you have any questions, feature requests, or issues, please open an issue on our GitHub repository or submit a pull request.

Thank you for considering AvalynxRef for your project!