sprocket/hooks

Types

Command type used in reducer hooks

pub type Cmd(msg) =
  reducer.Cmd(msg)

Functions

pub fn callback(
  ctx: Context,
  callback_fn: fn() -> Nil,
  deps: List(Dynamic),
  cb: fn(Context, fn() -> Nil) -> #(a, Element),
) -> #(a, Element)

Callback Hook

Creates a callback hook that will return a cached version of a given callback function and only recompute the callback when specified dependencies change.

This hook is useful for when a component needs to use a callback function that is referenced as a dependency by another hook, such as an effect hook.

pub fn client(
  ctx: Context,
  name: String,
  handle_event: Option(
    fn(
      String,
      Option(Dynamic),
      fn(String, Option(Dynamic)) -> Nil,
    ) -> Nil,
  ),
  cb: fn(
    Context,
    fn() -> Attribute,
    fn(String, Option(Dynamic)) -> Nil,
  ) -> #(Context, Element),
) -> #(Context, Element)

Client Hook

Creates a client hook that can be used to facilitate communication with a client (such as a web browser). The client hook functionality is defined by the client and is typically used to send or receive messages to/from the client.

pub fn dep(dependency: a) -> Dynamic

Creates a hook dependency from some value

pub fn effect(
  ctx: Context,
  effect_fn: fn() -> Option(fn() -> Nil),
  deps: List(Dynamic),
  cb: fn(Context) -> #(Context, Element),
) -> #(Context, Element)

Effect Hook

Creates an effect hook that will run the given effect function when the deps change. The effect function is memoized and recomputed when the deps change. The effect function can return a cleanup function that will be called when the effect is removed.

pub fn memo(
  ctx: Context,
  memo_fn: fn() -> a,
  deps: List(Dynamic),
  cb: fn(Context, a) -> #(Context, Element),
) -> #(Context, Element)

Memo Hook

Creates a memo hook that can be used to memoize the result of a function. The memo hook will return the result of the function and will only recompute the result when the dependencies change.

This hook is useful for optimizing performance by memoizing the result of an expensive function between renders.

pub fn provider(
  ctx: Context,
  key: String,
  cb: fn(Context, Option(a)) -> #(Context, Element),
) -> #(Context, Element)

Provider Hook

Creates a provider hook that allows a component to access data from a parent or ancestor component. The provider hook will return an optional containing the current value provided from an ancestor using a given provider function. If the provider hook is called from a context that does not have a matching provider, the hook will return None.

The ancestor provides the value by using a custom provider that is unique to the provider hook. This custom provider is created using provider function in the sprocket/internal/context module.

This hook is conceptually similar to the useContext hook in React.

pub fn reducer(
  ctx: Context,
  initial: #(a, List(fn(fn(b) -> Nil) -> Nil)),
  update: fn(a, b) -> #(a, List(fn(fn(b) -> Nil) -> Nil)),
  cb: fn(Context, a, fn(b) -> Nil) -> #(Context, Element),
) -> #(Context, Element)

Reducer Hook

Creates a reducer hook that can be used to manage state. The reducer hook will return the current state of the reducer and a dispatch function that can be used to update the reducer’s state. Dispatching a message to the reducer will result in a re-render of the component.

pub fn state(
  ctx: Context,
  initial: a,
  cb: fn(Context, a, fn(a) -> Nil) -> #(Context, Element),
) -> #(Context, Element)

State Hook

Creates a state hook that can be used to manage state. The state hook will return the current state and a setter function that can be used to update the state. Setting the state will result in a re-render of the component.

Search Document