https://github.com/dimfeld/svelte-rough-notation
A Svelte wrapper around the rough-notation library
https://github.com/dimfeld/svelte-rough-notation
Last synced: over 1 year ago
JSON representation
A Svelte wrapper around the rough-notation library
- Host: GitHub
- URL: https://github.com/dimfeld/svelte-rough-notation
- Owner: dimfeld
- License: mit
- Created: 2020-05-27T21:36:42.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-26T19:34:26.000Z (over 2 years ago)
- Last Synced: 2025-03-01T00:11:21.187Z (over 1 year ago)
- Language: Svelte
- Homepage: https://www.npmjs.com/package/svelte-rough-notation
- Size: 62.5 KB
- Stars: 40
- Watchers: 3
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
This is a Svelte wrapper around the [rough-notation](https://github.com/rough-stuff/rough-notation) library.
It exposes both a wrapper component using a slot, and an action that can be used on a DOM element with Svelte's `use:` syntax.
# Wrapper Component
The component can be toggled by setting the `visible` boolean property, or through the same `show` and `hide` API exposed by the original component. It also has properties for each configuration option exposed by rough-notation, and these can be updated after the component is created.
```html
import Annotation from 'svelte-rough-notation';
import { onMount } from 'svelte';
let rn;
let visible = false;
onMount(() => {
setTimeout(() => {
visible = true; // or rn.visible = true or rn.show()
}, 1000);
});
Some text
```
Annotation groups work as well. The `rough-notation` group implementation uses an undocumented attribute of the annotation, but this Svelte wrapper supports it, so you can just pass the component instance directly to the annotation group.
```html
import Annotation from "svelte-rough-notation";
import { annotationGroup } from "rough-notation";
import { onMount } from "svelte";
let groupAnnotations = [];
onMount(() => {
ag = annotationGroup(groupAnnotations);
});
ag.show()}>Show Group
Here we have
some important things
and also
some more things
```
# Svelte Action
The action's configuration can contain all the options exposed by rough-notation, as well as a `visible` property that controls the show/hide behavior of the annotation. Updates to the configuration will be applied to the annotation.
Annotation groups are not supported with the action version of the Svelte wrapper.
```html
import { annotate } from 'svelte-rough-notation';
Some text
```
# Example
There is a small sample app in the `site` directory of this repository, or you can check it out [in the Svelte REPL](https://svelte.dev/repl/e0346ec2945e4b3abbaceebf50163d2d?version=3.23.0)!