https://github.com/trendyminds/include-fragment

A zero-dependency, micro utility to make an XHR request for HTML content directly in your HTML!
https://github.com/trendyminds/include-fragment

Last synced: 6 days ago
JSON representation

A zero-dependency, micro utility to make an XHR request for HTML content directly in your HTML!

• Host: GitHub
• URL: https://github.com/trendyminds/include-fragment
• Owner: trendyminds
• License: mit
• Created: 2020-10-27T20:56:56.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-10-27T20:58:17.000Z (about 4 years ago)
• Last Synced: 2024-10-31T17:12:19.450Z (20 days ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 📦 Include Fragment

## 🤔 What is this?

This package is a fork/reconception of [GitHub's _fantastic_ Include Fragment Element package](https://github.com/github/include-fragment-element). **You should nearly _always_ prefer it to this package**.

## 🤷‍♂️ Why this package then?

While Include Fragment Element is much more robust this:

- 0️⃣   Has **zero dependencies**

- 🚀   Is <1kB (**443 bytes gzipped**)

- 🌍   Does not require a custom elements polyfill

- 🧙‍♂️   Still allows you to dynamically insert and defer fragments

## ⚡️ Setup and use

1. Install using `npm i @trendyminds/include-fragment`

2. Add the appropriate HTML and a valid `data-src` for your XHR request:

### Before

```html



	


		Loading tip...

	



```


### After

```html



	
You look nice today



```


## 💡 Tips

- You can defer the loading of a fragment by leaving out the `data-src`. As soon as it's added the MutationObserver will run the XHR request.

- You can provide a custom fallback/error message if the request fails:

### Before

```html



	


		Loading tip...

	



```


### After

```html



	Uh oh!



```


## 🤝 Browser Support

- Chrome

- Firefox

- Safari

- IE 11+