NOTE: Introduced feature in
v0.4.1
.
IntersectionRender
disables rendering of child content before it has come into the root element's viewport at least once. Useful for lazy loading content besides media.
<script>
import {
Box,
Code,
IntersectionRender,
Spacer,
Transition,
} from "@kahi-ui/framework";
let is_intersecting = false;
</script>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Box
palette={is_intersecting
? "affirmative"
: "negative"}
padding="small"
>
Scroll down to watch this <Code>Box</Code> change when
the <Code>Box</Code> comes into view.
</Box>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<IntersectionRender
threshold={0.5}
bind:is_intersecting
>
<Transition animation="scale" variation="enter">
<Box palette="inverse" padding="small">
I am in view!
</Box>
</Transition>
</IntersectionRender>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Box
palette={is_intersecting
? "affirmative"
: "negative"}
padding="small"
>
Scroll up to watch this <Code>Box</Code> change when
the <Code>Box</Code> comes into view.
</Box>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
Imports
<script>
import {IntersectionRender} from "@kahi-ui/framework";
</script>
Compatibility
The Component only runs on clientside Browsers with Javascript enabled. So you need to plan a SSR-compatible fallback if using in a SSR scenario. It is also dependent on IntersectionObserver
.
Eager
NOTE: It is good practice to give the
IntersectionRender
a fixed size that generally matches the child content when using this mode. Otherwise you can end up with janky scrolling.
You can change the behavior of IntersectionObserver
by passing in the loading
attribute. Which will make the Component ALWAYS disable rendering when outside of the root viewport, not just on initial load.
<script>
import {
Box,
Code,
IntersectionRender,
Spacer,
Transition,
} from "@kahi-ui/framework";
let is_intersecting = false;
</script>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Box
palette={is_intersecting
? "affirmative"
: "negative"}
padding="small"
>
Scroll down to watch this <Code>Box</Code> change when
the <Code>Box</Code> comes into view.
</Box>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<IntersectionRender
class="intersectionrender-eager"
loading="eager"
threshold={0.5}
bind:is_intersecting
>
<Transition animation="scale" variation="enter">
<Box
class="intersectionrender-eager"
palette="inverse"
padding="small"
>
I am in view!
</Box>
</Transition>
</IntersectionRender>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Box
palette={is_intersecting
? "affirmative"
: "negative"}
padding="small"
>
Scroll up to watch this <Code>Box</Code> change when
the <Code>Box</Code> comes into view.
</Box>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<style>
:global(.intersectionrender-eager) {
height: 40px;
}
</style>
Fallthrough
USAGE: REPL renders in your Browser, so this feature will always conditionally render anyway.
By default, IntersectionRender
will never render when running in SSR environments. You can change it to always render in those environments via the fallthrough
property.
<script>
import {
Box,
Code,
IntersectionRender,
Spacer,
Transition,
} from "@kahi-ui/framework";
let is_intersecting = false;
</script>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Box
palette={is_intersecting
? "affirmative"
: "negative"}
padding="small"
>
Scroll down to watch this <Code>Box</Code> change when
the <Code>Box</Code> comes into view.
</Box>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<IntersectionRender
threshold={0.5}
fallthrough
bind:is_intersecting
>
<Transition animation="scale" variation="enter">
<Box palette="inverse" padding="small">
I am in view!
</Box>
</Transition>
</IntersectionRender>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Box
palette={is_intersecting
? "affirmative"
: "negative"}
padding="small"
>
Scroll up to watch this <Code>Box</Code> change when
the <Code>Box</Code> comes into view.
</Box>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />