# reveal.js-script-fragment

> reveal.js plugin to execute a Javascript script as a fragment

Latest version **0.1.0** (published 2023-09-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install reveal.js-script-fragment
pnpm add reveal.js-script-fragment
yarn add reveal.js-script-fragment
bun add reveal.js-script-fragment
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-09-04 |
| First published | 2023-09-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | guillem.cordoba |

## Links

- npm: https://www.npmjs.com/package/reveal.js-script-fragment
- npm.io page: https://npm.io/package/reveal.js-script-fragment

## Dependencies (2)

- [uuid](https://npm.io/package/uuid.md) ^9.0.0
- [reveal.js](https://npm.io/package/reveal.js.md) =4.3.0

## Recent versions

- 0.1.0 (latest) — 2023-09-04

## README

# reveal.js-animate-fragments

A [Reveal.js](https://revealjs.com/) plugin to execute a Javascript script as a fragment.

## Installation

```bash
npm install reveal.js-script-fragment
```

## Usage

Add the plugin:

```html
<script type="module">
  import RevealScriptFragment from "reveal.js-script-fragment";

  import Reveal from "reveal.js";

  let deck = new Reveal({
    plugins: [RevealScriptFragment ],
  });
  deck.initialize();
</script>
```

And then add a fragment script like this:

```html
<section>
  <span class="fragment">This is a fragment!</span>

  <script-fragment>
    <script data-on-show type="text/template">
      console.log('This will print when this fragment is shown');
    </script>
    <script data-on-hide type="text/template">
      console.log('This will print when this fragment is hidden');
    </script>
  </script-fragment>

</section>
```

Both scripts types `data-on-show` and `data-on-hide` are optional.

---
_Source: https://npm.io/package/reveal.js-script-fragment · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._