flhooks 0.0.1 flhooks: ^0.0.1 copied to clipboard
React like Hooks implementation for Flutter.
flhooks #
React like Hooks implementation for Flutter.
This package is inspired by React Hooks.
This is a work in progress, fell free to fork or open issues.
Getting Started #
You should ensure that you add the flhooks as a dependency in your flutter project.
dependencies:
flhooks: "^0.0.1"
You should then run flutter packages upgrade
or update your packages in IntelliJ.
Rules #
When using Hooks, React Hooks rules must be followed.
Only Call Hooks at the Top Level #
Don’t call Hooks inside loops, conditions, or nested functions. Hooks can only be used inside a HookBuilder builder params. They can also be used to create other hooks.
Example #
Simple Usage #
Hooks can only be used inside the builder of an HookBuilder.
// Define a Slider Page
final SliderPage = () =>
HookBuilder(
builder: (BuildContext context) {
// define a state of type double
final example = useState(0.0);
final onChanged = useCallback((double newValue) {
// call example.set for update the value in state
example.set(newValue);
}, [example]);
return Material(
child: Center(
child: Slider(
key: sliderKey,
value: example.value,
onChanged: onChanged,
),
),
);
},
);
// Start the app
void main() =>
runApp(MaterialApp(
home: SliderPage(),
));
Custom Hooks #
Custom Hooks name must start with 'use'.
class MultipliedState {
const DoublerState(this.value, this.set);
final value;
final set;
}
final useMultiplied = (initial, multiplier) {
final state = useState(inital);
final set = useCallback((value) => state.set(value * multiplier),
[state, multiplier]);
return MultipliedState(
value: state.value,
set: set,
);
};
Now you can use useMultiplied like any other hooks.
Hooks #
Currently implemented Hooks.
useMemo #
useMemo
take a function, fn, and the values, store,
used in the function as input,
return the value of the call fn(), recall fn() only if store changed.
final helloMessage = useMemo(() => 'Hello ${name}', [name]);
// the fn passed to useMemo will be recalled only if name change
useCallback #
useCallback
take a function, fn, and the values, store,
used in the function as input,
return the same reference to fn until the store change.
final onClick = useCallback(() => ..., [input1, input2]);
// return always the same reference to the first fn passed to useCallback
// until input1 or input2 change
// it's like passing an high order function to useMemo
useState #
useState
take the initial value as input and return an HookState
with the current value and the set function.
final name = useState('');
// ... get the value
Text(name.value);
//... update the value
onChange: (newValue) => name.set(newValue);