React examples

Start by Resizing this window in different resolutions

This demo is working with React in Hybrid mode, so you can use both data-adaptive and data-teleport attributes with React elements or static elements (outside of React). It offers a React component called "TeleportTo" that will teleport any element to any other element when visible.
Look at all the examples in the "test/index.html" and "example/app.js" and "example/hello.vue", and/or use the code inspector to see the DOM changes

Static ID "hello" Element using json compliant object to add classes at "desktop" and "tablet" sizes

static element using non compliant json object to add classes at "desktop" and "tablet" sizes

Adding Inline styling per device at "desktop" and "tablet" sizes
Teleporting before "hello"
String like directives
Custom CSS query Expressions via string like Directive. This will add a class at a custom breakpoint. This element has an ID of "customQueries"

Static element that will teleport at "tablet" size to a Vue driven element when visible

Static element that will teleport at "desktop or mobile" right above "static hello"

Static element that will teleport right "after" "customQueries" with data attribute in hybrid mode

2 Static element that will teleport "hello" with data attribute using an array like string