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 Position
The Chakra UI library is a popular React UI library that helps build advanced and customizable user interfaces. One essential aspect of building UI is positioning the elements at the right positions on the screen. Prerequisites: NPM & NodeReact JSReactJS ChakraUIHTML, CSS, and JavaScriptChakra U
4 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
React Chakra UI Form Number Input
React Chakra UI Form Number Input is a powerful and user-friendly component tailored for efficient numeric data entry in web applications. Built on the Chakra UI foundation, this component seamlessly integrates into React applications, providing developers with a simple yet customizable solution for
2 min read
React Chakra UI Other Show/Hide
React Chakra UI Show and Hide components are used to show or hide children elements when a specific media query matches. We can provide custom media query to the Show and Hide components or use the predefined responsive size defined by Chakra UI. Prerequisites:NPM & NodeReact JSHTML, CSS and Jav
2 min read
React Chakra UI Navigation
React Chakra UI Navigation Bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. Prerequisites:NPM and NodeReact JSHTML, CSS, and JavaScriptReactJS ChakraUIWe will use the f
3 min read
Chakra UI Form Select
Chakra UI is a modern UI building library that comprises of many predefined customizable components. One of those components are 'Select'. Select component in Chakra UI allows an user to choose a value from a set of defined values. 'RadioGroup' does somewhat similar thing. However, In the case where
5 min read