React Chakra UI Other Transitions

React Chakra UI has a Transition component which has types like Fade, ScaleFade, SlideFade, and Collapse. All these types provide animation effects and smooth transitions in the application. By using the transition types in the application, the appearance of the elements is enhanced and the application becomes more engaging. In this article, we will explore the Chakra UI Other Transitions component will all the types by demonstrating a practical example.

Prerequisites:

• NPM & Node
• React
• React Chakra UI

Approach:

We have created the demonstration of the Chakra UI Other Transitions component with various transitions like Fase, ScaleFade, SlideFade, and Collapse Transition. Each of the transitions is triggered when the user clicks on the respective buttons added in the UI. This makes the application attractive and more modern.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app chakra

Step 2: After creating your project folder(i.e. chakra), move to it by using the following command:

cd chakra

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

The updated dependencies are in the package.json file.

"dependencies": {
      "@chakra-ui/react": "^2.8.2",
      "@emotion/react": "^11.11.3",
      "@emotion/styled": "^11.11.0",
      "@testing-library/jest-dom": "^5.17.0",
      "@testing-library/react": "^13.4.0",
      "@testing-library/user-event": "^13.5.0",
      "framer-motion": "^6.5.1",
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "react-scripts": "5.0.1",
      "web-vitals": "^2.1.4"
}

Example: Below is the practical implementation of the Chakra UI Other Transitions.

Javascript

import React from 'react';
import {
    ChakraProvider,
    Box,
    Button,
    Collapse,
    Fade,
    ScaleFade,
    Slide,
    SlideFade,
    extendTheme,
    useDisclosure,
    Heading,
} from '@chakra-ui/react';
const theme = extendTheme({
    styles: {
        global: {
            body: {
                fontFamily: 'Roboto, sans-serif',
                bg: 'gray.100',
            },
        },
    },
});
const geeksData = {
    courses: 'Explore our latest courses',
    programming: 'Enhance your programming skills',
    articles: 'Read insightful articles on various topics',
};
function App() {
    const { isOpen: fadeOpen,
        onToggle: fadeToggle } = useDisclosure();
    const { isOpen: scaleFadeOpen,
        onToggle: scaleFadeToggle } = useDisclosure();
    const { isOpen: slideOpen,
        onToggle: slideToggle } = useDisclosure();
    const { isOpen: slideFadeOpen,
        onToggle: slideFadeToggle } = useDisclosure();
    const { isOpen: collapseOpen,
        onToggle: collapseToggle } = useDisclosure();
    return (
        <ChakraProvider theme={theme}>
            <Box maxW="600px" mx="auto"
                mt="8" textAlign="center">
                <Heading as="h1"
                    color="green.500" mb="4">
                    GeeksforGeeks
                </Heading>
                <Heading as="h3"
                    fontSize="xl" mb="6">
                    Chakra UI Other Transitions
                </Heading>
                <Button onClick={fadeToggle}
                    colorScheme="teal" mt="4">
                    Click Me (Fade Transition)
                </Button>
                <Fade in={fadeOpen}>
                    <Box p="4" mt="4" bg="teal.500"
                        rounded="md" shadow="md" color="white">
                        {geeksData.courses}
                    </Box>
                </Fade>
                <Button onClick={scaleFadeToggle}
                    colorScheme="blue" mt="4">
                    Click Me (ScaleFade Transition)
                </Button>
                <ScaleFade initialScale={0.9}
                    in={scaleFadeOpen}>
                    <Box p="4" mt="4" bg="blue.500"
                        rounded="md" shadow="md" color="white">
                        {geeksData.programming}
                    </Box>
                </ScaleFade>
                <Button onClick={slideToggle}
                    colorScheme="purple" mt="4">
                    Click Me (Slide Transition)
                </Button>
                <Slide direction="bottom"
                    in={slideOpen} style={{ zIndex: 10 }}>
                    <Box p="4" mt="4" bg="purple.500"
                        rounded="md" shadow="md" color="white">
                        {geeksData.articles}
                    </Box>
                </Slide>
                <Button onClick={slideFadeToggle}
                    colorScheme="orange" mt="4">
                    Click Me (SlideFade Transition)
                </Button>
                <SlideFade in={slideFadeOpen}
                    offsetY="20px">
                    <Box p="4" mt="4" bg="orange.500"
                        rounded="md" shadow="md" color="white">
                        {geeksData.courses}
                    </Box>
                </SlideFade>
                <Button onClick={collapseToggle}
                    colorScheme="green" mt="4">
                    Click Me (Collapse Transition)
                </Button>
                <Collapse in={collapseOpen}
                    animateOpacity>
                    <Box p="4" mt="4" bg="green.500"
                        rounded="md" shadow="md" color="white">
                        {geeksData.programming}
                    </Box>
                </Collapse>
            </Box>
        </ChakraProvider>
    );
}
export default App;

Start your application using the following command.

npm start

Output: Now go to http://localhost:3000 in your browser: