When creating a sample site using React, you may want to create it quickly and easily by combining existing settings without thinking too much about the site design.
We usually use UI Fabric (now Fluent UI), which is used by Microsoft Office365, for React UI components.
Fluent UI has a wealth of components and is well documented, and I have had no particular trouble using it, but it is a massive and grandiose library, so I wanted a UI component that I could use when I want to create a site in a more relaxed manner.
I was curious to try it, and it seemed to be a good way to design loosely, so I would like to introduce it here.
Impressions from use
The following are my impressions of the Chakra UI.
Minimal UI components" + "DOM for writing inline styles" + "Collection of preset settings"
Common components such as buttons, forms, and menus are all available.
Styles can be written directly in the DOM, which is used to build the site design.
Style setting values can be specified directly, but frequently used sizes, colors, and items are predefined with aliases.
Example
import { ChakraProvider } from "@chakra-ui/react" import { Box } from "@chakra-ui/react" function App() { return ( <ChakraProvider> <Box m="2" w="200px" borderWidth="1px" borderRadius="xl" > <Box p="2" m="2" borderRadius="xl" bgColor="red.200" fontSize="xs" > TEST 1 </Box> <Box p="2" m="2" borderRadius="xl" bgColor="blue.200" fontSize="md" > TEST 2 </Box> <Box p="2" m="2" borderRadius="xl" bgColor="green.200" fontSize="xl" > TEST 3 </Box> </Box> </ChakraProvider> ); } export default App;
- The "m" stands for "margin" and the "p" for "padding. Other frequently used styles have aliases.
- xs" in "fontSize" is the actual "0.75rem". red.200" in "bgColor" is actually "#FEB2B2". Other preset values are provided as aliases in the theme.
I feel comfortable writing it, there's not much to remember, and it'll be a snap to use!
reuse
Frequently used styles can be defined as objects and used like classes.
For example, in the above example, p="2" m="2" borderRadius="xl" is redundant and can be summarized.
function App() { const itemStyle = { p: 2, m: 2, borderRadius: "xl" }; return ( <ChakraProvider> <Box m="2" w="200px" borderWidth="1px" borderRadius="xl" > <Box sx={itemStyle} bgColor="red.200" fontSize="xs" > TEST 1 </Box> <Box sx={itemStyle} bgColor="blue.200" fontSize="md" > TEST 2 </Box> <Box sx={itemStyle} bgColor="green.200" fontSize="xl" > TEST 3 </Box> </Box> </ChakraProvider> ); }
How to read the document
The document will be this way (direction close to the speaker or towards the speaker).
A list of available styles can be found in [Style Props].
Presets are defined in themes, and the default themes are listed in [Default Theme] to see what presets are available.
These two pages and the rest of the pages for the components you want to use, if necessary, will help you get by.
Impressions, etc.
Even if you do not write styles directly, there are several layout components such as "Flex" and "Grid" that can be used to write complex configurations with fewer descriptions.
There are other interesting features, such as a dark mode, but I'll leave it at this, since it is out of the original purpose of using the camera loosely.
