React Chakra UI Filter is the component that is used to apply filter and backdrop filters to the various elements. Using this component, we can adjust the grayscale, blur, brightness, contrast, and more properties of the elements. The simple Image can be adjusted in various appearances by controlling its filter properties. In this article, we will see the practical implementation of the Chakra UI Filter in terms of an Example where we will be applying the Filter properties on the GFG Logo Image.
Prerequisites:
Approach:
We have created a Box in which we have placed the GFG Logo image. Using the Chakra UI Filter component, we are representing the GFG Logo image in 6 different filtered effects. Each box has a different filter which is applied to the Image along with the text positioned above the image.
Steps to Create React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app chakraStep 2: After creating your project folder(i.e. chakra), move to it by using the following command:
cd chakraStep 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@^6Project 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 Filter.
import React from "react";
import { ChakraProvider,
Flex,
Box,
extendTheme,
CSSReset,
Heading,
} from "@chakra-ui/react";
const theme = extendTheme({ shadows: {
filter: "0 4px 8px rgba(0, 0, 0, 0.5)",
},
});function App() {
return (
<ChakraProvider theme={theme}>
<CSSReset />
<Flex
direction="column"
align="center"
justify="center"
minH="100vh"
>
<Heading as="h1" color="green" mb="4">
GeeksforGeeks
</Heading>
<Heading as="h3" mb="8">
Chakra UI Filter
</Heading>
<Flex flexWrap="wrap" gap="24px" justifyContent="space-evenly">
<Box
w="250px"
h="250px"
textAlign="center"
color="red"
textShadow="0 0 20px black"
fontWeight="bold"
fontSize="20px"
px="4"
bg={`url(
https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png) center/cover no-repeat`}
filter="grayscale(80%)"
position="relative"
>
<Box position="absolute" top="0" left="0" right="0">
Box with Filter
</Box>
</Box>
<Box
w="250px"
h="250px"
textAlign="center"
color="red"
textShadow="0 0 20px black"
fontWeight="bold"
fontSize="20px"
px="4"
bg={`url(
https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png) center/cover no-repeat`}
filter="blur(2px)"
position="relative"
>
<Box position="absolute" top="0" left="0" right="0">
Box with Blur
</Box>
</Box>
<Box
w="250px"
h="250px"
textAlign="center"
color="red"
textShadow="0 0 20px black"
fontWeight="bold"
fontSize="20px"
px="4"
bg={`url(
https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png) center/cover no-repeat`}
filter="brightness(40%)"
position="relative"
>
<Box position="absolute" top="0" left="0" right="0">
Box with Brightness
</Box>
</Box>
</Flex>
<Flex
flexWrap="wrap"
gap="24px"
justifyContent="space-evenly"
mt="8"
>
<Box
w="250px"
h="250px"
p="10"
bg={`url(
https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png) center/cover no-repeat`}
position="relative"
>
<Box
w="full"
h="full"
textAlign="center"
color="red"
textShadow="0 0 20px black"
fontWeight="bold"
fontSize="20px"
backdropFilter="invert(100%)"
position="absolute"
top="0"
left="0"
right="0"
>
Box with Backdrop Filter
</Box>
</Box>
<Box
w="250px"
h="250px"
p="10"
bg={`url(
https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png) center/cover no-repeat`}
position="relative"
>
<Box
w="full"
h="full"
textAlign="center"
color="red"
textShadow="0 0 20px black"
fontWeight="bold"
fontSize="20px"
backdropFilter="blur(8px)"
position="absolute"
top="0"
left="0"
right="0"
>
Box with Backdrop Blur
</Box>
</Box>
<Box
w="250px"
h="250px"
p="10"
bg={`url(
https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png) center/cover no-repeat`}
position="relative"
>
<Box
w="full"
h="full"
textAlign="center"
color="red"
textShadow="0 0 20px black"
fontWeight="bold"
fontSize="20px"
backdropFilter="contrast(30%)"
position="absolute"
top="0"
left="0"
right="0"
>
Box with Backdrop Contrast
</Box>
</Box>
</Flex>
</Flex>
</ChakraProvider>
);
}export default App;
|
Step to run the application: Run the application using the following command:
npm run start Output: Now go to http://localhost:3000 in your browser: