Svelte bindings for effector.
pnpm add effector-svelte
Gate replicates the implementation from effector-react. Provides the createGate
function.
import { createGate } from 'effector-svelte'
const Gate = createGate()
The function can take as a parameter a name or a configuration object.
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
is a Svelte component constructor with additional fields:
-
.open
-Event<void>
fired upon gate mounting. -
.close
-Event<void>
fired upon gate unmounting. -
.state
-Store<T>
containing the current state of the gate. This state derives fromstate
prop when rendering the gate as a component. -
.status
-Store<boolean>
indicating whether the gate is mounted.
Wrap your component in a Gate component. When the gate is rendered, its state properties will change.
<script lang="ts">
import { StatusGate } from './stores'
</script>
<StatusGate>
<slot />
</StatusGate>
Add a use:gate
action element to the HTML and pass the gate as a parameter to it.
<script lang="ts">
import { gate } from 'effector-svelte'
import { StatusGate } from './stores'
</script>
<div use:gate={StatusGate}>
<slot />
</div>