com.fulcrologic.fulcro.react.hooks — com.fulcrologic/fulcro 3.2.1-RC5

Simple wrappers for React hooks support, along with additional predefined functions that do useful things with hooks in the context of Fulcro.

use-callback cljs

(use-callback cb)

(use-callback cb args)

A simple wrapper around React/useCallback. Converts args to js array before send.

React docs: https://reactjs.org/docs/hooks-reference.html#usecallback

use-context cljs

(use-context ctx)

A simple wrapper around React/useContext.

use-debug-value cljs

(use-debug-value value)

(use-debug-value value formatter)

A simple wrapper around React/useDebugValue.

React docs: https://reactjs.org/docs/hooks-reference.html#uselayouteffect

use-effect cljs

(use-effect f)

(use-effect f args)

A simple wrapper around React/useEffect.

React docs: https://reactjs.org/docs/hooks-reference.html#useeffect

use-fulcro-mount cljs

(use-fulcro-mount parent-this {:keys [child-class initial-state-params]})

Generate a new sub-root.

;; important, you must use hooks (`defhc` or `:use-hooks? true`)
(defsc NewRoot [this props]
  {:use-hooks? true}
  (let [f (use-fulcro-mount this {:child-class SomeChild})]
    ;; parent props will show up in SomeChild as computed props.
    (f props)))

WARNING: Requires you use multi-root-renderer.

use-gc cljs

(use-gc this-or-app ident edges)

Effect handler. Creates an effect that will garbage-collect the given ident from fulcro app state on cleanup, and will follow any edges (a set of keywords) and remove any things pointed through those keywords as well. See normalized-state's remove-entity.

(defsc NewRoot [this props]
  {:use-hooks? true}
  (let [generated-id (hooks/use-generated-id)
        f (use-fulcro-mount this {:child-class SomeChild
                                  :initial-state-params {:id generated-id})]
    ;; will garbage-collect the floating root child on unmount
    (use-gc this [:child/id generated-id] #{})
    (f props)))

use-generated-id cljs

(use-generated-id)

Returns a constant ident with a generated ID component.

use-imperative-handle cljs

(use-imperative-handle ref f)

A simple wrapper around React/useImperativeHandle.

React docs: https://reactjs.org/docs/hooks-reference.html#useimperativehandle

use-layout-effect cljs

(use-layout-effect f)

(use-layout-effect f args)

A simple wrapper around React/useLayoutEffect.

React docs: https://reactjs.org/docs/hooks-reference.html#uselayouteffect

use-memo cljs

(use-memo cb)

(use-memo cb args)

A simple wrapper around React/useMemo. Converts args to js array before send.

React docs: https://reactjs.org/docs/hooks-reference.html#usememo

use-reducer cljs

(use-reducer reducer initial-arg)

(use-reducer reducer initial-arg init)

A simple wrapper around React/useReducer. Returns a cljs vector for easy destructuring

React docs: https://reactjs.org/docs/hooks-reference.html#usecontext

use-ref cljs

(use-ref)

(use-ref value)

A simple wrapper around React/useRef.

React docs: https://reactjs.org/docs/hooks-reference.html#useref

use-state cljs

(use-state initial-value)

A simple wrapper around React/useState. Returns a cljs vector for easy destructuring.

React docs: https://reactjs.org/docs/hooks-reference.html#usestate