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 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 Filter.
JavaScript
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:
.png)
Similar Reads
React Chakra UI Other Chakra UI is a useful tool that allows users to design appealing and practical websites and applications in a quick and easy way. It provides a variety of ready-to-use components that can be personalized and adjusted to meet different project needs, thus streamlining web development and making it mo
6 min read
React Chakra UI Overlay Chakra UI, a comprehensive React component library, introduces the concept of Overlays serving as dynamic visual elements that are superimposed on the main content, providing additional context, functionality, or notifications. Although Chakra UI doesn't have a standalone "Overlay" component, it off
4 min read
React Chakra UI Grid Layout React Chakra UI Grid Layout is an incredibly powerful and flexible component designed to streamline the creation of responsive and aesthetically pleasing grid-based designs within web applications. As an integral part of the Chakra UI library, this grid layout system offers developers a seamless int
2 min read
React Chakra UI Gradient React Chakra UI Gradients allow you to add stylish and visually appealing backgrounds. Gradients are a blend of two or more colors that transition smoothly from one to another. In this article, we will learn about the implementation of the Gradients in Chakra UI. Prerequisites:NPM & NodeReactRea
2 min read
React Chakra UI Other Portal Chakra UI Other Portal component by Chakra UI allows and enables users to render the components outside their parent hierarchy, this is useful for rendering efficiently React Applications. We can use this component where we need to be visually positioned in the DOM outside its parent. In this articl
3 min read