https://github.com/douganderson444/svelte-resizable

https://github.com/douganderson444/svelte-resizable

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/douganderson444/svelte-resizable
• Owner: DougAnderson444
• Created: 2022-03-25T21:48:28.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-04-08T14:28:59.000Z (about 1 year ago)
• Last Synced: 2025-02-26T02:48:01.959Z (3 months ago)
• Language: Svelte
• Homepage: https://douganderson444.github.io/svelte-resizable/
• Size: 3 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Resize handle for any HTML Node element

Resize handle for any HTML Node element

![Demo](resizable.gif)

## Use

See `./src/routes/+page.svelte` for a full demo.

The Resize Component will make it's direct parent element resizable.

```js

  import { resizable } from '@douganderson444/svelte-resizable';

Resize me

Hidden resizer

Resize if transformed

Custom Componenet resizer

```


The directive will set the HTMLElement as `relative` if it detects it as `static`. If it's `absolute` it will leave it as absolute.

## Customised Resizer Handle

You can use your own custom resizer, just pass your component a param to the Svelte directive. Your component **must** call the resizable-provided `trigger` function with your handle `HTMLElement` as a `param`. The below example also destroys the mouse tracker when the component is destroyed.

```svelte

	import { createEventDispatcher } from 'svelte';

	export let show = true; // optional boolean to toggle whether to show the resizer handle

	export let mounted = false; // required boolean for parent directive to indicate when mounted has occured

	const dispatch = createEventDispatcher();

	let handle; // bind this var to your custom handle

	$: if (mounted && handle) {

		dispatch('ready', { handle }); // let the parent know we're ready to track

	}

{#if show}

	


{/if}

```