https://github.com/radiofrance/svelte-component-actions

A svelte action to facilitate the use of actions and action parameters on components.
https://github.com/radiofrance/svelte-component-actions

action actions component components svelte useactions

Last synced: 24 days ago
JSON representation

A svelte action to facilitate the use of actions and action parameters on components.

• Host: GitHub
• URL: https://github.com/radiofrance/svelte-component-actions
• Owner: radiofrance
• Created: 2023-11-14T14:03:44.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2023-11-14T15:08:24.000Z (12 months ago)
• Last Synced: 2024-10-02T06:43:52.496Z (about 1 month ago)
• Topics: action, actions, component, components, svelte, useactions
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/svelte-component-actions
• Size: 6.84 KB
• Stars: 3
• Watchers: 10
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# svelte-component-actions

This package provides a [svelte action](https://svelte.dev/docs/svelte-action) that facilitates the use of actions and action parameters on components. It is based on what [svelte-material-ui](https://github.com/hperrin/svelte-material-ui) uses internaly for its own components.

## Install

```bash

npm install svelte-component-actions

```

## Usage

In the component you want to pass actions to :

- Expose a `use` props

- Import `useActions` from `svelte-component-actions` and add the `use` directive to the desired element as follows : `use:useActions={use}`

```html

  import { useActions, type ActionArray } from "svelte-component-actions";

  export let use: ActionArray = [];



  Hello from MyComponent !



```


When using your component, give the `use` prop an array. Each array element can either be an action, or an array containing an action followed by its parameters.

```html

  import MyComponent from "./Mycomponent.svelte"

  import { myAction, myActionWithParams }

```

> ⚠️ **When updating action parameters, do not change the actions array length**