https://github.com/mishamyrt/effector-svelte

☄️ Svelte bindings for effector
https://github.com/mishamyrt/effector-svelte

effector state-management svelte

Last synced: 2 months ago
JSON representation

☄️ Svelte bindings for effector

• Host: GitHub
• URL: https://github.com/mishamyrt/effector-svelte
• Owner: mishamyrt
• License: mit
• Created: 2024-04-07T11:05:38.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-06-01T13:36:11.000Z (8 months ago)
• Last Synced: 2024-11-02T18:52:17.273Z (3 months ago)
• Topics: effector, state-management, svelte
• Language: TypeScript
• Homepage:
• Size: 85.9 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ☄️ Effector Svelte [![Quality Assurance](https://github.com/mishamyrt/effector-svelte/actions/workflows/qa.yaml/badge.svg)](https://github.com/mishamyrt/effector-svelte/actions/workflows/qa.yaml)

Svelte bindings for effector.

## Installation

```sh

pnpm add effector-svelte

```

## Modules

### Gate

Gate replicates [the implementation from effector-react](https://effector.dev/en/api/effector-react/gate/). Provides the `createGate` function.

#### `createGate`

```ts

import { createGate } from 'effector-svelte'

const Gate = createGate()

```

The function can take as a parameter a name or a configuration object.

```ts

const NamedGate = createGate('name')

const IndexGate = createGate({

  name: 'index',

  defaultValue: -1

})

```

The return result of the `createGate` function will be a constructor of `Gate` type.

#### `Gate`

`Gate` is a Svelte component constructor with additional fields:

- `.open` - `Event` fired upon gate mounting.

- `.close` - `Event` fired upon gate unmounting.

- `.state` - `Store` containing the current state of the gate. This state derives from `state` prop when rendering the gate as a component.

- `.status` - `Store` indicating whether the gate is mounted.

#### Component usage

Wrap your component in a Gate component. When the gate is rendered, its state properties will change.

```svelte

  import { StatusGate } from './stores'

  

```

#### Actions usage

Add a `use:gate` action element to the HTML and pass the gate as a parameter to it.

```svelte

  import { gate } from 'effector-svelte'

  import { StatusGate } from './stores'



  



```