Chapter 11 of 11·Reference

Framework adapters

Thin idiomatic wrappers over the vanilla core, each around 0.4 kB.

React Adapter (use-skelly/react)

Includes the <Skelly> container wrapper, <Skelly.Suspense> boundaries, and the useSkelly() hook. RSC-compatible.

Profile.jsxreact

import { Skelly } from 'use-skelly/react';
import 'use-skelly/style.css';

function Profile({ isLoading, data }) {
  return (
    <Skelly loading={isLoading}>
      <ProfileCard user={data} />
    </Skelly>
  );
}

Vue Adapter (use-skelly/vue)

Provides the custom directive v-skelly and the <Skelly> wrapper component.

Profile.vuehtml

<!-- Using Custom Directive -->
<div v-skelly="isLoading">
  <profile-card :user="data" />
</div>

<!-- Using Wrapper Component -->
<Skelly :loading="isLoading">
  <profile-card :user="data" />
</Skelly>

<script setup>
import { vSkelly, Skelly } from 'use-skelly/vue';
import 'use-skelly/style.css';
</script>

Svelte Adapter (use-skelly/svelte)

Provides the Svelte action use:skelly and a Svelte container element wrapper component.

Profile.sveltehtml

<script>
  import { skelly, Skelly } from 'use-skelly/svelte';
  import 'use-skelly/style.css';
  export let isLoading = true;
</script>

<!-- Using Svelte Action -->
<div use:skelly={{ loading: isLoading, visual: 'shimmer' }}>
  <slot />
</div>

<!-- Using Wrapper Component -->
<Skelly loading={isLoading}>
  <slot />
</Skelly>

Vanilla JavaScript Core (use-skelly)

The core layout-measurement compiler. Works anywhere in the DOM.

app.jsjs

import { skelly } from 'use-skelly';
import 'use-skelly/style.css';

const element = document.querySelector('.profile-container');
const release = skelly(element, {
  visual: 'shimmer',
  rows: 4
});

// When loading is finished:
release();