sprocket - v0.2.1

sprocket/hooks

Functions

callback

</> 
pub fn callback(
  ctx: Context,
  callback_fn: fn() -> Nil,
  trigger: HookTrigger,
  cb: fn(Context, fn() -> Nil) -> #(a, Element),
) -> #(a, Element)

Callback Hook

Creates a callback that can be triggered from DOM event attributes. The callback function will be called with the event payload. This hook ensures that the callback identifier remains stable preventing unnecessary id changes across renders. The callback function is memoized and recomputed based on the trigger type.

client

</> 
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.

effect

</> 
pub fn effect(
  ctx: Context,
  effect_fn: fn() -> Option(fn() -> Nil),
  trigger: HookTrigger,
  cb: fn(Context) -> #(Context, Element),
) -> #(Context, Element)

Effect Hook

Creates an effect hook that will run the given effect function when the hook is triggered. The effect function is memoized and recomputed based on the trigger type.

handler

</> 
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.

memo

</> 
pub fn memo(
  ctx: Context,
  memo_fn: fn() -> a,
  trigger: HookTrigger,
  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.

provider

</> 
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.

reducer

</> 
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.

state

</> 
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