@getneurotic/svelte NPM

Svelte Directives & Helpers Bundle

A bundle containing utility directives and helpers for Svelte applications.

Installation

Using yarn:

yarn add -D @getneurotic/svelte

Using npm:

npm install -D @getneurotic/svelte

Usage

First, ensure you have the necessary dependencies installed in your project. Then, you can import and use the directives in your Svelte components:

<script>
	import { clickOutside, teleport } from '@getneurotic/svelte/directives';
	import { useForm } from '@getneurotic/svelte/helpers';
	import FormField from '$lib/FormField.svelte';

	// Initialize form with default data
	const form = useForm({ first_name: '' });

	// Submit form
	function handleSubmit() {
		$form.post('/forms/contact', {
			onError: () => alert('Oops!'),
			onSuccess: () => alert('Yay!'),
			onFinish: () => alert('Ready!'),
		});
	}
</script>

<!-- Use clickoutside directive -->
<button use:clickoutside on:clickoutside={() => alert('Hello!')}>
	Click on everything but me!
</button>

<!-- Use teleport directive -->
<div use:teleport={{ target: '#exampleElement' }}>
	<p>Hello world!</p>
</div>

<!-- Use form helper -->
<form on:submit|preventDefault={handleSubmit}>
	<FormField bind:error={$form.errors.first_name} bind:value={$form.first_name} />
	<button class:loading={$form.processing}>Submit</button>
</form>

Directives & Helpers

clickoutside: Detects clicks outside of a given DOM node and dispatches a 'clickoutside' event.
teleport: Teleports the children of a given DOM node to another target DOM node.
useForm: Creates a form store with utility methods for form handling.