Rad Hooks


A set of commonly used hooks for using in your Rad applications.

Basic Usage

Widget someReusableWidget() => HookScope(() {

  // create a state variable

  var state = useState(1);

  return Span(
    innerText: 'You clicked me ${state.value} times!',
    onClick: (e) => state.value++, // <- update state(causes re-render)

void main() {
    app: someReusableWidget(),
    appTargetId: 'output',

Available Hooks

useRef , useState , useMemo , useCallback , useEffect , useLayoutEffect

For complete reference of available hooks, please refer to index page.

Creating custom hooks

This package also serves as an example that show cases flexibility and power of hooks APIs in Rad. If you feel like missing a hook, you can just create it and hook it in your application. We recommend you to look into implementation of hooks included in this package for getting an idea on how to create your own hooks which then can be used directly in your Rad applications.


For reporting bugs/queries, feel free to open issue. Read contributing guide for more.


A set of commonly used Hooks for using in your Rad applications.