Svelte bindings for effector.
pnpm add effector-svelte
Gate replicates the implementation from effector-react. Provides the createGate
function.
createGate
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
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 from state
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>