Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

Transition

A transition component allow enter/leave CSS transitions for React elements.

usage: import { Transition } from "@sharegate/orbit-ui";
sources: Github

Usage

This is a not a component to handle all kind of generic transitions. This component is specialized for enter and leave transitions.

By default, a transition will enter and leave instantly. To animate your enter/leave transition specify a CSS class for the enter and leave props.

Editable example

() => {
    const [isVisible, setIsVisible] = useState(false);

    const handleToggle = useCallback(() => {
        setIsVisible(x => !x);
    }, [setIsVisible]);

    return (
        <Div minHeight="80px">
            <Button onClick={handleToggle} variant="secondary" marginBottom={4}>
                Toggle animation
            </Button>
            <Transition show={isVisible} enter="o-ui-fade-in" leave="o-ui-fade-out">
                <Text>Earth is a small town with many neighborhoods in a very big universe.</Text>
            </Transition>
        </Div>
    );
};() => {
    const [isVisible, setIsVisible] = useState(false);

    const handleToggle = useCallback(() => {
        setIsVisible(x => !x);
    }, [setIsVisible]);

    return (
        <Div minHeight="80px">
            <Button onClick={handleToggle} variant="secondary" marginBottom={4}>
                Toggle animation
            </Button>
            <Transition show={isVisible} enter="o-ui-fade-in" leave="o-ui-fade-out">
                <Text>Earth is a small town with many neighborhoods in a very big universe.</Text>
            </Transition>
        </Div>
    );
};

API

Transition

usage: import { Transition } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
animateFirstRender	Whether the transition should run on initial mount. falsetrue	false
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
enter	CSS classes to add to the transitioning element during the enter phase. string	-
leave	CSS classes to add to the transitioning element during the leave phase. string	-
show*	A controlled show value that determined whether or not the component is displayed. falsetrue	-

No Preview

Transition

Usage

API

Transition