WithTransition property - over_react_components library

A wrapper component that hooks into CSS transition(s) present on a single child passed to it.

For example, say you have an element that "fades" in/out using the fade CSS class to apply a CSS transition, and an in CSS class that - when present - changes the opacity from 0 to 1.

Using this component, you can simply toggle the value of WithTransitionPropsMixin.isShown from false to true using your own state to make the node "fade in", and hook into the available prop callbacks like onDidShow, onDidHide to know when the CSS transition has completed.

import 'package:over_react/over_react.dart';
import 'package:over_react/components.dart' show WithTransition;

mixin WithTransitionExampleProps on UiProps {
  bool? initiallyShown;
}

UiFactory<WithTransitionExampleProps> WithTransitionExample = uiFunction(
  (props) {
    final initiallyShown = props.initiallyShown ?? false;

    final isShown = useState(initiallyShown);

    final classes = ClassNameBuilder.fromProps(props)
      ..add('fade')
      ..add('in', isShown.value);

    return Dom.div()(
      Dom.div()(
        (Dom.button()
          ..type = 'button'
          ..onClick = (useCallback((_) {
            isShown.setWithUpdater((isShown) => !isShown);
          }, const []))
        )('Toggle Visibility'),
      ),
      (WithTransition()
        ..isShown = isShown.value
        ..onWillShow = () {
          // Do something that should happen before the CSS transition completes.
        }
        ..onDidShow = () {
          // Do something that shouldn't happen until the CSS transition completes.
        }
        ..onWillHide = () {
          // Do something that should happen before the CSS transition completes.
        }
        ..onDidHide = () {
          // Do something that shouldn't happen until the CSS transition completes.
        }
      )(
        (Dom.div()
          ..className = classes.toClassName()
        )(
          // Some children...
        ),
      )
    );
  },
  _$WithTransitionExampleConfig, // ignore: undefined_identifier
);

Wrapping around custom components

If you want to wrap around another component instead of around a single Dom element child as shown in the first example above, you must ensure that the value of props.ref is forwarded to the Element that has the CSS transition using uiForwardRef:

import 'package:over_react/over_react.dart';

mixin CustomChildProps on UiProps {}

UiFactory<CustomChildProps> CustomChild = uiForwardRef(
  (props, ref) {
    return (Dom.div()..ref = ref)(
      props.children,
    ),
  },
  _$CustomChildConfig, // ignore: undefined_identifier
);

WithTransition top-level property

Implementation

over_react_components library