https://github.com/mishamyrt/effector-svelte
☄️ Svelte bindings for effector
https://github.com/mishamyrt/effector-svelte
effector state-management svelte
Last synced: 5 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 (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-01T13:36:11.000Z (about 2 years ago)
- Last Synced: 2025-03-05T00:17:40.342Z (over 1 year 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 [](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'
```