sprocket/hooks

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(String)) -> Result(Nil, Nil),
    ) -> Nil,
  ),
  cb: fn(
    Context,
    fn() -> Attribute,
    fn(String, Option(String)) -> Result(Nil, 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 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 handler(
  ctx: Context,
  handler_fn: fn(Option(CallbackParam)) -> Nil,
  cb: fn(Context, IdentifiableHandler) -> #(a, Element),
) -> #(a, Element)

Handler Hook

Creates a handler callback that can be triggered from DOM event attributes. The callback function will be called with the event payload. This hook ensures that the handler identifier remains stable preventing unnecessary id changes across renders.

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 the current value provided from an ancestor with the given key. The ancestor provides the value by using the provider element from the sprocket/context module.

This hook is conceptually the same as the useContext hook in React.

pub fn reducer(
  ctx: Context,
  initial: a,
  reducer: fn(a, b) -> a,
  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