flhooks 0.0.1
flhooks: ^0.0.1 copied to clipboard

outdated

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);
1
likes
0
pub points
27%
popularity

React like Hooks implementation for Flutter.

Repository (GitHub)
View/report issues

Uploader

noctisbels@gmail.com

License

LICENSE

Dependencies

flutter

More

Packages that depend on flhooks