minimal-css-transitions v0.1.2

Note: This project is in alpha. It is a work in progress.

Minimal CSS Transitions

Simple Transitions for React

Minimal CSS Transitions is a lightweight React component designed to simplify the application of common CSS transitions. Its primary focus is to easily handle page transitions with react-router-dom@6.

Installation

npm install @team-rhino/minimal-css-transitions

Development

Storybook

$ bun install
$ npm install --no-save react -react-dom
$ bun dev

Build

$ bun install
$ bun build

Storybook Development

Features

• Simple API with intuitive prop names.
• Supports both single and separate entrance/exit transitions.
• Configurable transition duration, delay, and easing.
• Callbacks for transition lifecycle.
• Option to unmount components after exit transition.

Usage

Simple use case

Minimally, the transition component can be used like this

import MinimalTransition from "@team-rhino/minimal-css-transitions";

function ExampleComponent() {
    return (
        <MinimalTransition transitionKey="uniqueKey" type="slide-horizontal">
            <YourContent />
        </MinimalTransition>
    );
}

React Router Full Example

import { BrowserRouter as Router, Routes, Route, Link, useLocation, matchRoutes } from "react-router-dom";
import MinimalTransition from "@team-rhino/minimal-css-transitions";

const App = (props) => (
    <Router>
        <div style={{ height: 400, width: '100%' }}>
            <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
                <Link to="/">Go Home</Link>
                <Link to="/page">Go to Page</Link>
                <Link to="/dissolve">Dissolve</Link>
                <Link to="/vertical">Vertical</Link>
            </div>
            <TransitionedRoutes {...props} />
        </div>
    </Router>
);

const Page = ({ color, children }) => {
    return <div style={{ height: '100%', width: '100%', position: 'relative', background: color }}>
        {children}
    </div>
}

const routes = [
    { path: '/', element: <Page color='blue'>Home content</Page>, transitionType: 'slide-horizontal' },
    { path: '/page', element: <Page color='red'>Page content</Page>, transitionType: 'slide-horizontal' },
    { path: '/dissolve', element: <Page color='green'>Dissolve</Page>, transitionType: 'dissolve' },
    { path: '/vertical', element: <Page color='purple'>Dissolve</Page>, transitionType: 'slide-vertical' },
];

const TransitionedRoutes = (props) => {
    const location = useLocation();

    const matched = matchRoutes(routes, location);
    const transitionType = matched?.[0]?.route.transitionType || 'slide-horizontal';

    return (
        <MinimalTransition transitionKey={location.key} type={transitionType} {...props}>
            <Routes>
                {routes.map(route => (
                    <Route key={route.path} path={route.path} element={route.element} />
                ))}
            </Routes>
        </MinimalTransition>
    );
}

export default App;

Props

| Prop          | Type     | Description |

|---------------|----------|-------------|

| transitionKey| string | Unique key to identify and control the transition. |

| type        | TransitionType | A single transition type for both enter and exit. |

| enterType   | TransitionType | Transition type for entering. |

| exitType    | TransitionType | Transition type for exiting. |

| duration    | number | Duration of the transition in milliseconds. Default is 3000000. |

| delay       | number | Delay before the transition starts in milliseconds. Default is 0. |

| easing      | string | CSS easing function, e.g., 'linear', 'ease-in-out'. Default is 'ease-in-out'. |

| children    | React.ReactNode | The content you want to apply the transition to. |

| onStart, onEnd | function | Callbacks for the start and end of the transition lifecycle. |

Supported Transition Types

• slide-horizontal
• slide-vertical
• dissolve
• expand-from

License

MIT