![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
svelte-popperjs
Advanced tools
Readme
Popper for Svelte with actions, no wrapper components or component bindings required!
Other Popper libraries for Svelte (including the official @popperjs/svelte
library) use a wrapper component that takes the required DOM elements as props. Not only does this require multiple bind:this
, you also have to pollute your script
tag with multiple DOM references.
We can do better with Svelte actions!
$ npm i -D svelte-popperjs
Since Svelte automatically bundles all required dependencies, you only need to install this package as a dev dependency with the -D
flag.
createPopperActions
takes an optional options object for configuring the popper instance, and returns a pair of actions to be used on the reference and popper elements.
The content action also takes an options object for updating the options of the popper instance.
A Svelte version of the standard tutorial.
<script>
import { createPopperActions } from 'svelte-popperjs';
const [popperRef, popperContent] = createPopperActions({
placement: 'right',
strategy: 'fixed',
});
const extraOpts = {
modifiers: [
{ name: 'offset', options: { offset: [0, 8] } }
],
};
let showTooltip = false;
</script>
<button
use:popperRef
on:mouseenter={() => showTooltip = true}
on:mouseleave={() => showTooltip = false}
>
My button
</button>
{#if showTooltip}
<div id="tooltip" use:popperContent={extraOpts}>
My tooltip
<div id="arrow" data-popper-arrow />
</div>
{/if}
Popper options can be set statically when creating the popper actions, or dynamically on the content action.
If both are set, then the dynamic options will be merged with the initial options.
<script>
// set once and no longer updated
const [popperRef, popperContent] = createPopperActions(initOptions);
</script>
<!-- will be merged with initOptions -->
<div use:popperContent={dynamicOptions}/>
PopperJS allows the reference node to be a virtual element which is not mounted on the DOM and cannot be used with Svelte actions.
Despite this, svelte-popperjs
provides first-class support for virtual elements, and even supports reactive updates to the virtual element with Svelte stores.
Here's an example creating a tooltip that follows the mouse cursor.
<script>
import { writable } from 'svelte/store';
import { createPopperActions } from 'svelte-popperjs';
const [popperRef, popperContent] = createPopperActions({
strategy: 'fixed',
});
let x = 0;
let y = 0;
const mousemove = (ev: MouseEvent) => {
x = ev.clientX;
y = ev.clientY;
}
$: getBoundingClientRect = () => ({
width: 0, height: 0,
top: y, bottom: y,
left: x, right: x,
});
const virtualElement = writable({ getBoundingClientRect });
$: $virtualElement = { getBoundingClientRect };
popperRef(virtualElement);
</script>
<svelte:window on:mousemove={mousemove} />
<main>
<div use:popperContent>Tooltip</div>
</main>
If access is needed to the raw Popper instance created by the actions, you can reference the third element returned by createPopperActions
. The third element is a function that will return the current Popper instance used by the actions.
Using the raw Popper instance to manually recompute the popper's position.
<script>
import { createPopperActions } from 'svelte-popperjs';
const [popperRef, popperContent, getInstance] = createPopperActions();
async function refreshTooltip() {
const newState = await getInstance().update();
}
</script>
FAQs
Popper for Svelte with actions, no wrapper components required!
The npm package svelte-popperjs receives a total of 4,674 weekly downloads. As such, svelte-popperjs popularity was classified as popular.
We found that svelte-popperjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.