https://github.com/yiss/mobx_hooks
Flutter Hooks for MobX
https://github.com/yiss/mobx_hooks
flutter-hooks hacktoberfest mobx riverpod
Last synced: 3 months ago
JSON representation
Flutter Hooks for MobX
- Host: GitHub
- URL: https://github.com/yiss/mobx_hooks
- Owner: yiss
- License: mit
- Created: 2020-10-13T15:44:30.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-18T22:15:50.000Z (about 5 years ago)
- Last Synced: 2025-10-23T00:57:46.057Z (3 months ago)
- Topics: flutter-hooks, hacktoberfest, mobx, riverpod
- Language: Dart
- Homepage:
- Size: 56.6 KB
- Stars: 11
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://lbesson.mit-license.org/) [](https://codecov.io/gh/yiss/mobx_hooks)  [](https://pub.dartlang.org/packages/mobx_hooks)
# Mobx Hooks
Flutter Hooks for Mobx. This package attemp to bring [Flutter Hooks]() for [Mobx]()
## Motivation & Inspiration :
The motivation for this project started when I wanted to migrate an old project of mine from Mobx to Riverpod and Flutter Hooks. But as much as I enjoyed using Riverpod and Flutter Hooks, I missed the ease of use of Mobx. So as I looked for something that combines both, but I couldn't find any.
#### Inspirations :
This package was inspired and uses the following packages as dependecnies
- [Flutter Hooks](https://github.com/rrousselGit/flutter_hooks) by [Remi Ressoulet](https://github.com/rrousselGit)
- [MobX](https://mobx.netlify.app/)
## Getting Started :
Just add the dependency to mobx_hooks in your pubspec.yaml :
```yaml
dependecies:
mobx_hooks: latest
```
## Example :
If you're familiar with MobX and Flutter Hooks, using MobX Hooks is very easy. Here is an example using a counter :
```dart
class Counter {
Counter() {
increment = Action(_increment);
}
final count = Observable(0);
Action increment;
void _increment() {
_value.value++;
}
}
final counter = Counter();
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MobX Hooks',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends HookWidget {
const MyHomePage();
@override
Widget build(BuildContext context) {
final count = useObservable(counter.count);
return Scaffold(
appBar: AppBar(
title: Text('MobX Counter'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
),
Text(
'${count.value}',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: counter.increment,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
```
## Hooks :
This is the initial list of Hooks available in this package. More are coming soon.
| Name | Description |
| ----------------- | --------------------------------------------------------------------------------------------------------- |
| [useObservable]() | Subscribes to an [Observable](https://mobx.netlify.app/api/observable) and return it's value |
| [useCompute]() | Creates a Mobx [Computed](https://mobx.netlify.app/api/observable#computed) from the result of a function |
| [useComputed]() | Subscribes to the value of a [Computed](https://mobx.netlify.app/api/observable#computed) |