https://github.com/ubermanu/arrosoir

🚿 Hydrate HTML with a selector and a url
https://github.com/ubermanu/arrosoir

dom html hydration

Last synced: about 2 months ago
JSON representation

🚿 Hydrate HTML with a selector and a url

• Host: GitHub
• URL: https://github.com/ubermanu/arrosoir
• Owner: ubermanu
• License: mit
• Created: 2022-02-23T11:22:28.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-28T15:00:52.000Z (about 1 year ago)
• Last Synced: 2024-12-03T01:36:55.814Z (2 months ago)
• Topics: dom, html, hydration
• Language: JavaScript
• Homepage: https://www.skypack.dev/view/arrosoir
• Size: 119 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Arrosoir

[![CI](https://github.com/ubermanu/arrosoir/actions/workflows/ci.yml/badge.svg)](https://github.com/ubermanu/arrosoir/actions/workflows/ci.yml)

Small DOM hydration function for generated HTML.

### Install

    npm install arrosoir

### Usage

```js

import { hydrate } from 'arrosoir'

await hydrate(selector, url)

```

For example:

```html

    import { hydrate } from 'https://cdn.skypack.dev/arrosoir'

    const url = new URL(location.href)

    let p = url.searchParams.get('p') * 1 || 1

    document.querySelector('button.load-more').addEventListener('click', async () => {

        url.searchParams.set('p', ++p)

        await hydrate('ul.list', url.toString(), { merge: 'append' })

    })

```

> The previous example fetches the page with a different query string.


> The `hydrate` function will merge the new HTML into the existing DOM.

### Options

- `merge`: Append the new HTML to the selector.

- `history`: Replace the current URL with the fetched one.