Chakra UI Typography
Chakra UI is a simple and effective component-based library, that allows developers to build modern and attractive UI’s for their website’s frontends. Developers can simply use the components pre-defined in Chakra UI in their React Code to work faster and write less.
Chakra UI Typography is a feature of ReactJS for styling and formatting text content. It is used to create and organize customized style props that remain consistent without repeating text properties.
Prerequisite:
Approach:
We will be using the Text component to render text and paragraphs while using various text props to include the typography feature in the React components. The various props used are “fontSize“, “textAlign“, “fontWeight“, “fontFamily“, “noOfLines” and so on. The “noOfLines” prop truncates the text after a specific number of lines to maintain the responsiveness of the UI.
Steps to create React application and installing module:
Step 1: Create a React application using the following command:
npm create-react-app gfg-typography-app
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd gfg-typography-app
Step 2: This will install all the necessary starter files for you. Now we will install the Chakra UI library using the following command:
npm i @chakra-ui/react @emotion/react
npm i @emotion/styled framer-motion
Project Structure:
The updated dependencies in the package.json file will look like this
"dependencies": {
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"framer-motion": "^6.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
Example: Write down the code in respective files. Inside your src folder, open “App.js”, where we will write our Chakra UI typography code. Below is the code for the same.
Javascript
//App.js // Filename - App.js import { ChakraProvider, Text} from "@chakra-ui/react" ; import Article from "./Article" ; import "./App.css" ; function App() { return ( <ChakraProvider> <Text color= "#2F8D46" fontSize= "2rem" textAlign= "center" fontWeight= "600" my= "1rem" > w3wiki - ReactJS Chakra UI concepts </Text> <Article /> </ChakraProvider> ); } export default App; |
Javascript
// Article.js import { Flex, Box, Text, Stack, } from "@chakra-ui/react" ; import './fonts/font.css' ; const Article = () => { return ( <Box bg= 'lightgrey' w= '100%' p={4} > <Flex justifyContent= "center" > <Flex w= "full" direction= "column" w= "60%" alignItems= "center" > <Text as= "h1" style= { { fontFamily: 'BlueParty' , } } fontWeight= "bold" > Typography by Chakra UI </Text> <Text noOfLines={[1, 2, 3]}> "Typography is a feature for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles, and much more." </Text> <Text style= { { fontFamily: 'GreatVibes' , } }> This is my text using "Greatvibes.otf" font file </Text> <Stack spacing={2}> <Text fontSize= 'xl' > This is text in xl size </Text> <Text fontSize= 'lg' color= 'tomato' > This is text in lg size </Text> <Text fontSize= 'md' color= 'aquamarine' > This is text in md size</Text> <Text fontSize= 'sm' color= 'aliceblue' > This is text in sm size</Text> <Text fontSize= 'xs' > This is text in xs size</Text> </Stack> </Flex> </Flex> </Box> ); }; export default Article; |
CSS
/** font.css **/ @font-face { font-family : BlueParty; src : url (BigParty 4 Blue -2575 .woff); } @font-face { font-family : GreatVibes; src : url (GreatVibes-Regular.otf); } |
Steps to run the application:
npm start
Output: This will show the responsive output (with text ellipsis) after the size of the above output is reduced with truncated text. This shows the working of “noOfLines” prop of Chakra-UI.