PHPackages avalynx/avalynx-ref - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. avalynx/avalynx-ref ActiveLibrary[Utility & Helpers](/categories/utility) avalynx/avalynx-ref =================== AvalynxRef is a Ref implementation for updating elements with a value like React's Ref or Vue's Ref. 1.0.2(2mo ago)21121MITJavaScriptCI passing Since May 30Pushed 2mo ago1 watchersCompare [ Source](https://github.com/avalynx/avalynx-ref)[ Packagist](https://packagist.org/packages/avalynx/avalynx-ref)[ Docs](https://github.com/avalynx/avalynx-ref)[ RSS](/packages/avalynx-avalynx-ref/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (6)DependenciesVersions (6)Used By (1) AvalynxRef ========== [](#avalynxref) [![npm version](https://camo.githubusercontent.com/056863202c62c768c469a7b9d120ef2b11ecc8288ba7f22ca260f4f6b67b786c/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6176616c796e782d726566)](https://www.npmjs.com/package/avalynx-ref)[![npm downloads](https://camo.githubusercontent.com/98569ce47a1f8c6c77ea9f9d45437428a907d11142169e46345e04760abd8bc2/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f6176616c796e782d726566)](https://www.npmjs.com/package/avalynx-ref)[![jsDelivr](https://camo.githubusercontent.com/86b658a4a8421acd00080c07f22b5d91be1f10b15b9f6a507fc21be9da2f0c90/68747470733a2f2f696d672e736869656c64732e696f2f6a7364656c6976722f6e706d2f686d2f6176616c796e782d726566)](https://www.jsdelivr.com/package/npm/avalynx-ref)[![License](https://camo.githubusercontent.com/0fa246221baf1c601e7bd8193b6ef465e7760aef6526ba9264d44f65a68b5cc5/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f6176616c796e782d726566)](LICENSE)[![Tests](https://github.com/avalynx/avalynx-ref/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/avalynx/avalynx-ref/actions/workflows/tests.yml)[![codecov](https://camo.githubusercontent.com/2b03cb6f2741736eb2bb6e4887249043629e484b58b13c7eca7efb1efff54cbe/68747470733a2f2f636f6465636f762e696f2f67682f6176616c796e782f6176616c796e782d7265662f6272616e63682f6d61696e2f67726170682f62616467652e737667)](https://codecov.io/gh/avalynx/avalynx-ref)[![GitHub stars](https://camo.githubusercontent.com/64e9d8cf47ed2e8f9243fb2fb26621631516cf5e0a899ce25e0b11760622a87f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f6176616c796e782f6176616c796e782d7265663f7374796c653d666c6174266c6f676f3d676974687562)](https://github.com/avalynx/avalynx-ref) 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 -------- [](#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 ------- [](#example) Here's a simple example of how to use AvalynxRef in your project: - [Overview](https://avalynx-ref.jbs-newmedia.de/examples/index.html) - [Random values](https://avalynx-ref.jbs-newmedia.de/examples/random-values.html) Installation ------------ [](#installation) To use AvalynxRef in your project, you can directly include it in your HTML file. Include AvalynxRef: ``` ``` Replace `path/to/avalynx-ref.js` with the actual path to the file in your project. Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-ref/)) ----------------------------------------------------------------------------- [](#installation-via-jsdelivr-link) AvalynxRef is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this: ``` ``` Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-ref)) ------------------------------------------------------------------------ [](#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 ------------------------------------ [](#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 Symfony AssetComposer -------------------------------------- [](#installation-via-symfony-assetcomposer) More information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle). ``` {% do addAssetComposer('avalynx/avalynx-ref/dist/js/avalynx-ref.js') %} ``` Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxRef displays correctly. Installation via Composer ([Link](https://packagist.org/packages/avalynx/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: ``` ``` Usage ----- [](#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 = "Updated content"; ``` Options ------- [](#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 ---------------- [](#planned-features) - callback function for value change Contributing ------------ [](#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 ------- [](#license) AvalynxRef is open-sourced software licensed under the [MIT license](LICENSE). Contact ------- [](#contact) If you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-ref/issues) or submit a pull request. Thank you for considering AvalynxRef for your project! ### Health Score 40 — FairBetter than 88% of packages Maintenance84 Actively maintained with recent releases Popularity15 Limited adoption so far Community11 Small or concentrated contributor base Maturity44 Maturing project, gaining track record Bus Factor1 Top contributor holds 97.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~159 days Total 5 Last Release 82d ago Major Versions 0.0.4 → 1.0.02025-06-05 ### Community Maintainers ![](https://www.gravatar.com/avatar/44b85e5ce069ccae08123600bb24204ea8fe99c8cb5cbfae108ff29c179e503d?d=identicon)[jschwind](/maintainers/jschwind) --- Top Contributors [![jschwind](https://avatars.githubusercontent.com/u/985564?v=4)](https://github.com/jschwind "jschwind (36 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)") --- Tags avalynxjavascriptreactreactjsrefreferencevuvuejsreactvueavalynxref ### Embed Badge ![Health badge](/badges/avalynx-avalynx-ref/health.svg) ``` [![Health](https://phpackages.com/badges/avalynx-avalynx-ref/health.svg)](https://phpackages.com/packages/avalynx-avalynx-ref) ``` ### Alternatives [ijpatricio/mingle Use Vue and React in Laravel Livewire Applications. 43445.4k2](/packages/ijpatricio-mingle)[talyssonoc/react-laravel Package to use ReactJS with Laravel 8944.9k](/packages/talyssonoc-react-laravel)[nystudio107/craft-routemap Returns a list of Craft/Vue/React route rules and element URLs for ServiceWorkers from Craft entries 3151.3k2](/packages/nystudio107-craft-routemap)[mkraemer/react-pcntl PCNTL bindings for ReactPHP 57289.0k9](/packages/mkraemer-react-pcntl)[marshmallow/nova-tiptap A Laravel Nova tiptap editor field. 19120.0k2](/packages/marshmallow-nova-tiptap)[sandstorm/lazydatasource Neos package implementing a lazy data source for the UI; so that the elements are loaded lazily on demand. 1044.5k4](/packages/sandstorm-lazydatasource) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)