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
Example 1: This example show alert.
Javascript
import { Alert, AlertIcon, AlertTitle, AlertDescription } from "@chakra-ui/react" ; import React from "react" ; const App = () => { return ( <> <Alert status= "success" variant= "subtle" flexDirection= "column" alignItems= "center" justifyContent= "center" textAlign= "center" height= "200px" borderRadius= "10px" boxShadow= "lg" > <AlertIcon boxSize= "40px" mr={0} /> <AlertTitle mt={4} mb={1} fontSize= "lg" > Success! </AlertTitle> <AlertDescription fontSize= "sm" > Your request was successful. Thanks for using our service. </AlertDescription> </Alert> </> ); } export default App |
Start your application using the following command:
npm start
Output:
Example 2: This example show Spinner.
Javascript
// App.jsx import React, { useState } from 'react' ; import { ChakraProvider, Flex, Button, Heading, CircularProgress, CircularProgressLabel } from '@chakra-ui/react' ; function App() { const [progress_val, set_progress_val] = useState(40); const [fix_progress, set_fix_progress] = useState( false ); const fixProgressFn = () => { set_fix_progress((prevValue) => !prevValue); }; const progressValFn = () => { set_progress_val((prevValue) => (prevValue + 10) % 101); }; const progressValDecFn = () => { set_progress_val((prevValue) => (prevValue - 10 + 100) % 101); }; return ( <ChakraProvider> <Flex direction= "column" align= "center" justify= "center" minHeight= "100vh" p={8}> <Heading as= "h1" color= "green.500" mb={4}> w3wiki </Heading> <Heading as= "h3" mb={1}> Chakra UI Feedback Circular Progress </Heading> <Flex direction= "row" justify= "center" > <CircularProgress value={fix_progress ? progress_val : undefined} isIndeterminate={fix_progress} capIsRound color= "teal.400" size= "120px" thickness={10} trackColor= "teal.100" > <CircularProgressLabel> {fix_progress ? `${progress_val}%` : '' } </CircularProgressLabel> </CircularProgress> </Flex> <Flex direction= "row" justify= "center" mt={4}> <Button onClick={fixProgressFn} m={2}> Toggle Fixed Progress Bar </Button> <Button onClick={progressValFn} m={2}> Increment Progress Bar </Button> <Button onClick={progressValDecFn} m={2}> Decrement Progress Bar </Button> </Flex> </Flex> </ChakraProvider> ); } export default App; |
Start your application using the following command:
npm start
Output:
Chakra UI Feedback
Chakra UI is a powerful tool that simplifies web development, offering a collection of customizable components and a well-thought-out design system. This article delves into user feedback, exploring the platform’s strengths and areas for improvement.
We will discuss about the following Feedback Components in Chakra UI
Table of Content
- Alert Component
- Circular Progress Component
- Progress Component
- Skeleton Component
- Spinner Component
- Toast Component