Always use the netlify cdn.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn-data-react.netlify.app/js/data-react-v2.js"></script>
</head>
<body></body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn-data-react.netlify.app/js/data-react-v3.js"></script>
</head>
<body></body>
</html>This allows you to include external HTML files directly within the body of your document by specifying the file path in the data-include-html or react-import attribute.
data-react is an HTML plugin for including external HTML files and mapping JavaScript arrays, similar to React.js functionality.
<body>
<div data-include-html="./templates/template"></div>
</body><body>
<div react-import="./templates/template"></div>
</body>This allows you to include external HTML files directly within the body of your document by specifying the file path in the data-include-html or react-import attribute.
const ulData = [
{ href: "/home", text: "home" },
{ href: "/about", text: "about" },
{ href: "/contact", text: "contact" },
];<ul data-react="map(ulData)" class="flex gap-8 items-center">
<li data-map>
<a href="{href}">{text}</a>
</li>
</ul><ul react="ulData" class="flex gap-8 items-center">
<li>
<a href="{href}">{text}</a>
</li>
</ul>This maps over the ulData array, dynamically generating li elements based on the values in the array.
const cardData = [
{
title: "title 1",
subTitle: `Film and other media. In film, examples of subtitles using "or" include Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb and Birdman or (The Unexpected Virtue of Ignorance).`,
src: "https://images.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg?cs=srgb&dl=pexels-pixabay-56866.jpg&fm=jpg",
alt: "image",
h3: "developer afsin",
p2: "author",
author: true,
freelancer: false,
},
{
title: "title 2",
subTitle: `Film and other media. In film, examples of subtitles using "or" include Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb and Birdman or (The Unexpected Virtue of Ignorance).`,
src: "https://images.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg?cs=srgb&dl=pexels-pixabay-56866.jpg&fm=jpg",
alt: "image",
h3: "developer afsin",
p2: "author",
author: true,
freelancer: true,
},
{
title: "title 3",
subTitle: `Film and other media. In film, examples of subtitles using "or" include Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb and Birdman or (The Unexpected Virtue of Ignorance).`,
src: "https://images.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg?cs=srgb&dl=pexels-pixabay-56866.jpg&fm=jpg",
alt: "image",
h3: "developer afsin",
p2: "author",
author: false,
freelancer: false,
},
];<div class="m-4">
<div data-react="map(cardData)" class="grid gap-4 grid-cols-3">
<div data-map class="bg-blue-300/80 p-4 rounded-xl">
<div class="grid gap-2">
<h2 class="text-xl text-slate-800 capitalize">{title}</h2>
<p class="text-sm text-slate-600">{subTitle}</p>
</div>
<div
class="flex gap-2 items-center m-4 { freelancer ? 'bg-green-100/80 border border-2 border-red-500' : 'bg-gray-100/80' } p-4 rounded-xl"
>
<img
src="{src}"
alt="{alt}"
class="rounded-full w-14 h-14 object-cover object-center"
/>
<div>
<h3 class="capitalize text-slate-600">{h3}</h3>
<p class="capitalize text-slate-400">{p2}</p>
</div>
</div>
</div>
</div>
</div><div class="m-4">
<div react="cardData" class="grid gap-4 grid-cols-3">
<div class="bg-blue-300/80 p-4 rounded-xl">
<div class="grid gap-2">
<h2 class="text-xl text-slate-800 capitalize">{title}</h2>
<p class="text-sm text-slate-600">{subTitle}</p>
</div>
<div
class="flex gap-2 items-center m-4 { freelancer ? 'bg-green-100/80 border border-2 border-red-500' : 'bg-gray-100/80' } p-4 rounded-xl"
>
<img
src="{src}"
alt="{alt}"
class="rounded-full w-14 h-14 object-cover object-center"
/>
<div>
<h3 class="capitalize text-slate-600">{h3}</h3>
<p class="capitalize text-slate-400">{p2}</p>
</div>
</div>
</div>
</div>
</div>This example maps over cardData and generates HTML conditionally based on the author and freelancer properties. It includes an image, text content, and conditional buttons based on the data attributes.
- The
freelancerkey controls the style of the card, applying different styles based on its value. - The
authorkey toggles the visibility of a section based on its value, hiding content when the condition isfalse.
const contentData = [
{
img: "https://static.vecteezy.com/system/resources/previews/036/226/872/non_2x/ai-generated-nature-landscapes-background-free-photo.jpg",
right: false,
},
{
img: "https://static.vecteezy.com/system/resources/previews/036/226/872/non_2x/ai-generated-nature-landscapes-background-free-photo.jpg",
right: true,
},
{
img: "https://static.vecteezy.com/system/resources/previews/036/226/872/non_2x/ai-generated-nature-landscapes-background-free-photo.jpg",
right: false,
},
];
const contentData2 = [
{
img: "https://static.vecteezy.com/system/resources/previews/036/226/872/non_2x/ai-generated-nature-landscapes-background-free-photo.jpg",
right: true,
},
{
img: "https://static.vecteezy.com/system/resources/previews/036/226/872/non_2x/ai-generated-nature-landscapes-background-free-photo.jpg",
right: true,
},
{
img: "https://static.vecteezy.com/system/resources/previews/036/226/872/non_2x/ai-generated-nature-landscapes-background-free-photo.jpg",
right: false,
},
];
const ul1 = [{ tx1: "technology" }, { tx1: "flowers" }, { tx1: "mountain" }];
const ul = [
{ tx: "technology1", showImports: false },
{ tx: "flowers1", showImports: false },
{ tx: "mountain1", showImports: false },
];
const deepNested = [
{
img: "https://cdn.pixabay.com/photo/2015/10/09/00/55/lotus-978659_960_720.jpg",
title: "Laptop with Coffee",
badge: [
{
tx: "technology",
subBadge: [
{ tx1: "coding" },
{ tx1: "development" },
{ tx1: "design" },
],
},
],
styles: {
card: "shadow-md p-4 bg-blue-500 border border-yellow-500",
img: "rounded-lg",
badge: "text-sm text-gray-700",
options: {
text: "my-text 1",
},
ul: [
{ tx: "technology", lis: [{ li: "li 1" }, { li: "li 2" }] },
{ tx: "flowers", lis: [{ li: "li 1" }, { li: "li 2" }] },
{ tx: "mountain", lis: [{ li: "li 1" }, { li: "li 2" }] },
],
},
makeRed: false,
},
{
img: "https://cdn.pixabay.com/photo/2024/01/14/16/30/mountain-range-8508224_960_720.jpg",
title: "Mountain range, River, Landscape image. Free for use.",
badge: [
{
tx: "flowers",
subBadge: [{ tx1: "garden" }, { tx1: "nature" }, { tx1: "blooming" }],
},
],
styles: {
card: "shadow-md p-4 bg-pink-500 border border-purple-500",
img: "rounded-lg",
badge: "text-sm text-gray-700",
options: {
text: "my-text 2",
},
ul: [
{ tx: "technology", lis: [{ li: "li 1" }, { li: "li 2" }] },
{ tx: "flowers", lis: [{ li: "li 1" }, { li: "li 2" }] },
{ tx: "mountain", lis: [{ li: "li 1" }, { li: "li 2" }] },
],
},
makeRed: true,
},
];<div>
<div data-include-html="./templates/content" data="contentData"></div>
<div class="p-4 bg-red-500">
<div data-include-html="./templates/content" data="contentData2"></div>
</div>
</div>
<div>
<div data-include-html="./templates/ul1" data="ul1"></div>
</div><div>
<div react-import="./templates/content" data="contentData"></div>
<div class="p-4 bg-red-500">
<div react-import="./templates/content" data="contentData2"></div>
</div>
</div>
<div>
<div react-import="./templates/ul1" data="ul1"></div>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="script.js"></script>
<script src="data-react-v3.js" defer></script>
</head>
<body class="bg-gray-100 p-4">
<div react="deepNested" class="flex gap-4 items-center">
<div class="p-4 bg-white rounded-md">
<img
src="{ img }"
alt="online-image"
class="w-full h-[100px] object-cover object-center"
/>
<div react-import="./data" data="{ styles.ul }"></div>
</div>
</div>
<div react-import="./data" data="ul"></div>
<!---->
</body>
</html>
<!-- data.html -->
<ul react="data" class="flex gap-8 items-center">
<li>
<span>{ tx }</span>
</li>
<div
react-import="./about"
data="{ lis }"
class="{ showImports ? ``: `hidden` }"
></div>
<div class="{ lis ? `hidden`:'' }">
{ showImports ? ` ` : `
<p>1</p>
` }
</div>
</ul>In the main HTML file, you'll reference external HTML templates using the data-include-html (v2) or react-import (v3) attribute. The data attribute will pass dynamic data (e.g., contentData and contentData2) to the template.
<div>
<div data-react="map(propsData)">
<div data-map class="m-4 p-10 py-20 grid gap-4 grid-cols-2 bg-gray-100">
<div class="bg-blue-300 p-4 { right ? 'order-2' : '' }">
<img src="{img}" alt="image" />
</div>
<div class="bg-red-300 p-4 { right ? 'order-1' : '' }"></div>
</div>
</div>
</div><div>
<div react="data">
<div class="m-4 p-10 py-20 grid gap-4 grid-cols-2 bg-gray-100">
<div class="bg-blue-300 p-4 { right ? 'order-2' : '' }">
<img src="{ img }" alt="image" />
</div>
<div class="bg-red-300 p-4 { right ? 'order-1' : '' }"></div>
</div>
</div>
</div>This external template file is where the dynamic data will be injected. The data-react="map(propsData)" (v2) or react="data" (v3) indicates the area where the data should be mapped, and the data-map (v2) or {right} (v3) attribute identifies elements that will receive the data.
<!-- index.html -->
<div>
<div react-import="./badge" data="badges"></div>
</div>
<div class="p-2">
<button
onclick="addRandomObjToArray(badges)"
class="px-4 py-1 bg-sky-500 text-white rounded-xl"
>
add
</button>
</div>
<!-- badge.html -->
<div class="flex gap-4 flex-wrap">
<span
onclick="showMyInnerText(this)"
class="text-xs rounded-full { redBg ? 'bg-red-300':'bg-sky-300' } p-2"
>{ badge }</span
>
</div>let badges = [
{ badge: "technology", redBg: false },
{ badge: "flowers", redBg: true },
{ badge: "mountain", redBg: false },
];
function addRandomObjToArray(arr) {
badges = [
...arr,
{
badge: Math.random().toFixed(2).toString(),
redBg: Math.random() > 0.5 ? true : false,
},
];
doWithReact((reload) => reload());
}
function showMyInnerText(me) {
alert(me.innerText);
}This 'doWithReact' function is called like as above when we want some js variable to update and show the updated data in our html, we can also do any kind of task in the 'doWithReact' function and should must call the callback function at the end.
for example
function addRandomObjToArray(arr) {
badges = [
...arr,
{
badge: Math.random().toFixed(2).toString(),
redBg: Math.random() > 0.5 ? true : false,
},
];
doWithReact((reload) => {
// do some task here
reload();
});
}This .md file contains a description of the data-react HTML plugin along with usage examples for including HTML files, mapping arrays, and conditionally rendering data for both v2 and v3 of the plugin. It demonstrates