@svuick/action

Installation

npm i @svuick/action

What is this?

This package exports some useful actions.

• focus
• innerfocus
• clickOutside
• intersection
• rectresize

Usage

focus

autofocus the element

<script>
    import { focus } from '@svuick/action';
</script>

<input use:focus/>

innerfocus

trap focus within an element

<script>
    import { innerfocus } from '@svuick/action';

    function handleClickOutside() {
        console.log("you clicked outside!");
    }
</script>
<div class="modal" use:innerfocus>
    <input />
    ...
</div>

clickOutside

emit an event when a click happens outside of the elements scope

<script>
    import { clickOutside } from '@svuick/action';

    function handleClickOutside() {
        console.log("you clicked outside!");
    }
</script>

<div use:clickOutside on:click_outside={handleClickOutside}>
    Some Content
</div>

intersection

emit events when the element enters and leaves viewport

<script>
    import { intersection } from '@svuick/action';

    function handleEnter() {
        console.log("the element entered the viewport");
    }
    function handleExit() {
        console.log("the element exited the viewport");
    }
</script>

<div
    use:intersection
    on:enter_viewport={handleEnter}
    on:exit_viewport={handleExit}
>Item</div>

rectresize

emit an event when element is resized

<script>
    import { rectresize } from '@svuick/action';

    function handleResize(e) {
        const rect = e.detail;
        console.log(`the new size of the element: ${rect.width} / ${rect.height}`);
    }
</script>

<textarea use:rectresize on:enter_viewport={handleResize}>Some text...</textarea>