# Visible

A wrapper that tracks whether its content is in the viewport (via IntersectionObserver) and passes a visible flag to its children.

**Category:** Components/Utilities/Visible

**Import:** `import { Visible } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `once` | `boolean` | `false` |  | Whether to change visibility just once.  Useful for loading expensive images or other media and then keeping them around once they're first loaded. |
| `top` | `string` | `'0px'` |  | Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. |
| `bottom` | `string` | `'0px'` |  | Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. |
| `left` | `string` | `'0px'` |  | Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. |
| `right` | `string` | `'0px'` |  | Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. |
| `threshold` | `number` | `0` |  | Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). |
| `children` | `Snippet<[boolean]>` | — |  | — |

## Examples

### Demo

```svelte
<VisibleDemo />
```

## Documentation

# Visible

The `Visible` component wraps around other components or HTML elements and uses the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to determine if they are visible on the page.

This is useful for lazy loading elements, especially expensive media files or components that fetch lots of data. You can also use it trigger animations or play media once a reader scrolls a component into view.

By default, `visible` will switch between `false` and `true` whenever the element is in our out of view. To trigger this just once, set the prop `once` to `true`. This is useful for loading expensive media when they first come into view and then keeping them around once they're loaded.

> **Note:** Don't use this for content that's "above the fold" at the top of the page. That'll just slow down the first load of important visible content.

```svelte
<script>
  import { Visible } from '@reuters-graphics/graphics-components';
</script>

<!-- Optionally set your own `top`, `bottom`, `right` and `left` values with `px` or `%` units -->
<Visible top="10px">
  {#snippet children(visible)}
    {#if visible}
      <p>Visible!</p>
    {:else}
      <p>Not yet visible.</p>
    {/if}
  {/snippet}
</Visible>
```