{"id":25541383,"url":"https://github.com/alfredosalzillo/flhooks","last_synced_at":"2025-04-11T17:02:40.078Z","repository":{"id":56828895,"uuid":"162925717","full_name":"alfredosalzillo/flhooks","owner":"alfredosalzillo","description":"React like Hooks implementation for Flutter.","archived":false,"fork":false,"pushed_at":"2019-07-04T07:47:26.000Z","size":36,"stargazers_count":38,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-25T13:02:46.003Z","etag":null,"topics":["builder","code-reuse","custom-hook","dart","flutter","flutter-hooks","hooks","hot-reload","hotreload","react-hooks","widget"],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alfredosalzillo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-23T21:39:47.000Z","updated_at":"2021-03-04T15:58:10.000Z","dependencies_parsed_at":"2022-08-29T00:20:29.942Z","dependency_job_id":null,"html_url":"https://github.com/alfredosalzillo/flhooks","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fflhooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fflhooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fflhooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alfredosalzillo%2Fflhooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alfredosalzillo","download_url":"https://codeload.github.com/alfredosalzillo/flhooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248446673,"owners_count":21105130,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["builder","code-reuse","custom-hook","dart","flutter","flutter-hooks","hooks","hot-reload","hotreload","react-hooks","widget"],"created_at":"2025-02-20T06:35:50.654Z","updated_at":"2025-04-11T17:02:40.045Z","avatar_url":"https://github.com/alfredosalzillo.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/alfredosalzillo/flhooks.svg?branch=master)](https://travis-ci.org/alfredosalzillo/flhooks)\n[![codecov](https://codecov.io/gh/alfredosalzillo/flhooks/branch/master/graph/badge.svg)](https://codecov.io/gh/alfredosalzillo/flhooks)\n\n# flhooks\nWrite stateful functional Component in Flutter.\nReact like Hooks implementation for Flutter.\n\nThis package is inspired by\n[React Hooks](https://reactjs.org/docs/hooks-intro.html).\n\n## Why Hooks\n\nLike for [React](https://reactjs.org/docs/hooks-intro.html#motivation),\nHooks try to be a simple method\nto share stateful logic between `Component`.\n\nThe goal of thi library is to devoid class extensions and mixin.\nOf course flutter is not designed for functional Component and Hooks.\n\n## Getting Started\n\nYou should ensure that you add the flhooks\nas a dependency in your flutter project.\n\n```yaml\ndependencies:\n flhooks: \"^1.1.0\"\n```\n\nYou should then run `flutter packages upgrade`\nor update your packages in IntelliJ.\n\n## Rules\n\nWhen using Hooks,\n[React Hooks rules](https://reactjs.org/docs/hooks-rules.html)\nmust be followed.\n\n### Only Call Hooks at the Top Level\n**Don’t call Hooks inside loops, conditions, or nested functions.**\nHooks can only be used inside a `HookBuilder` builder param.\nThey can also be used to create other hooks.\n\n## Simple Usage\n\nHooks can only be used inside the builder of an `HookBuilder`.\n\n`HookBuilder` is like a `StatefulBuilder` how build the `builder` function.\nHooks function can be used only in the `builder` function.\n\n```dart\n// Define a Slider Page\nfinal SliderPage = () =\u003e\n    HookBuilder(\n      builder: (BuildContext context) {\n        // define a state of type double\n        final example = useState(0.0);\n        final onChanged = useCallback((double newValue) {\n          // change example.value for update the value in state\n          example.value = newValue;\n        }, [example]);\n        return Material(\n          child: Center(\n            child: Slider(\n              key: sliderKey,\n              value: example.value,\n              onChanged: onChanged,\n            ),\n          ),\n        );\n      },\n    );\n// Start the app\nvoid main() =\u003e\n    runApp(MaterialApp(\n      home: SliderPage(),\n    ));\n```\n\n## Hooks\n\nCurrently implemented Hooks.\n\n### useMemo\n`useMemo` return the memoized result of the call to `fn`.\n\n`fn` will be recalled only if `store` change.\n\n```dart\n final helloMessage = useMemo(() =\u003e 'Hello ${name}', [name]);\n```\n\n### useCallback\n`useCallback` return the first reference to `fn`.\n\n`fn` reference will change only if `store` change.\n```dart\nfinal onClick = useCallback(() =\u003e showAwesomeMessage(input1, input2),\n  [input1, input2]);\n```\nIt's the same as passing `() =\u003e fn` to `useMemo`.\n\n### useState\n\n`useState` return a `StateController`,\n`HookState.value` is the `initial` value passed to `useState`,\nor the last set using `state.value = newValue`.\n\n`state.value = newValue` will trigger\nthe rebuild of the `StatefulBuilder`.\n\n```dart\nfinal name = useState('');\n// ... get the value\n  Text(name.value);\n//... update the value and rebuild the component\n  onChange: (newValue) =\u003e name.value = newValue;\n```\n\n### useEffect\n\n`useEffect` exec `fn` at first call or if `store` change.\nIf `fn` return a function, this will be called if `store` change\nor when the widget dispose.\n\n```dart\nuseEffect(() {\n  final pub = stream.listen(callback);\n  return () =\u003e pub.cancel();\n  }, [stream]);\n```\n \n`useEffect` is useful for handle async or stream subscription.\n\n### Custom Hooks\n\nCustom Hooks function can be created composing other hooks function.\n\nCustom Hooks name must start with 'use'.\n\n```dart\nV useAsync\u003cV\u003e(Future\u003cV\u003e Function() asyncFn, V initial, List store) {\n  final state = useState(initial);\n  useEffect(() {\n    var active = true;\n    asyncFn().then((result) {\n      if (active) {\n        state.value = result;\n      }\n    });\n    return () {\n      active = false;\n    };\n  }, store);\n  return state.value;\n}\n```\n\nNow you can use `useAsync` like any other hooks function.\n\n## Hot Reload\n\nHot reload is basically supported.\n\nWhen the hock type change, because an hook function is added,\nremoved, or change type, \nthe hook will be disposed and reset to null.\n\nHowever after an add or a remove, all hooks after the one how change,\ncan be disposed or had a reset.\n\n__Pay attention, will be no break after hot reloading the app,\nbut will be other side effects.__\n\nWe decide to not make hooks shift to the next position,\nbecause we prefer to have the same behavior in the case you add,\nremove, or change an hook function call.\n\nFeel free to open a issue or fork the repository\nto suggest a new implementation.\n\n## Example\n\nMore example in the [example](example) directory.\n\n## Changelog\nCurrent version is __1.1.0__,\nread the [changelog](CHANGELOG.md) for more info.\n\n## Next on flhooks\n\nNew hooks will be added in future like `useFuture` (or `useAsync`) and `useStream`,\nthere will be no need to use `FutureBuilder` and `StreamBuilder` anymore.\n\nWe are actually testing some `useIf` conditional implementation of hooks.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfredosalzillo%2Fflhooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falfredosalzillo%2Fflhooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falfredosalzillo%2Fflhooks/lists"}