#

How I built my first typescript-next-chakra website ?

#typescript, #next, #chakra-ui, #mdx, #firstpost

23 January, 2022

At the beginning

#

Where does this idea come from, why do we have to do it? I asked myself a lot of questions and watched a lot of videos in order to realize my projects and it's thanks to them that I was able to learn how to start with Next and how to use Chakra, a beautiful library straight out of the future.

Explanation

#

First of all I went on Youtube and I found @devaslife who made his portfolio with Chakra-UI in Javascript, so I tried to understand and reproduce it to produce a satisfactory result. So I created a website in javascript (you can find it here: Flonoa Homepage). I come from JAVA, I'm used to typed variables, so I was looking for my way in this big world that is web development. Then I searched and found a typescript template and went for it frontend-horse-ui. I directly fell in love with Chakra, its hooks, its content, the way it works, especially its discord community with which I work and help daily when I can.

Here an example how to render 404 page in Chakra:

1import NextLink from 'next/link'; // NextLink import
2import { Box, Button, Divider, Heading, Text } from '@chakra-ui/react'; // Chakra component imports
3

4const NotFoundPage = () => {
5  return (
6    <Layout title='Not Found'>
7      <Section delay={0.3}>
8        <Heading as='h1'>Not Found</Heading>
9        <Text>The page you&apos;re looking for was not found.</Text>
10        <Divider my={6} />
11

12        <Box my={6} align='center'>
13          <NextLink href='/'>
14            <Button colorScheme='pink'>Return to home</Button>
15          </NextLink>
16        </Box>
17      </Section>
18    </Layout>
19  );
20};
21

22export default NotFoundPage;

It's beautiful because you've the control on your components. <Heading> component will refer to <h1> in HTML and you can customize it as you wish. That's not all, Chakra-UI uses framer-motion for these animated components (Fade, ScaleFade, Slide, SlideFade, Collapse). So I also fell in love with motion which is simply amazing especially mixed with Chakra, let's see an example of a ThemeButton with IconButton chakra-component with motion():

1import {
2  IconButton,
3  IconButtonProps,
4  useColorMode,
5  useColorModeValue as mode,
6} from '@chakra-ui/react';Ø
7import { BsMoon } from 'react-iconsbs';
8import { WiDaySunny } from 'react-icons/wi';
9import { AnimatePresence, motion, Variants } from 'framer-motion';
10

11//declaration of animation variants
12const variants: Variants = {
13  initial: {
14    y: -20,
15    opacity: 0,
16    transition: {
17      type: 'spring',
18      duration: 0.2,
19    },
20  },
21  animate: {
22    y: 0,
23    opacity: 1,
24    transition: {
25      type: 'spring',
26      duration: 0.2,
27    },
28  },
29  exit: {
30    y: 20,
31    opacity: 0,
32    transition: {
33      type: 'spring',
34      duration: 0.2,
35    },
36  },
37};
38

39// button component
40const ThemeButton = () => {
41  const { toggleColorMode } = useColorMode(); // hook for change colormode
42  const MotionButton = motion<IconButtonProps>(IconButton); // declaration for the IconButton component with props of a motion
43

44  return (
45    <AnimatePresence exitBeforeEnter initial={false}>
46      <MotionButton
47        variants={variants}
48        initial='initial'
49        animate='animate'
50        exit='exit'
51        aria-label='Toggle theme'
52        colorScheme={mode('purple', 'orange')}
53        icon={mode(<BsMoon />, <WiDaySunny />)}
54        onClick={toggleColorMode}
55      />
56    </AnimatePresence>
57  );
58};
59

60export default ThemeButton;

So you can see the MotionButton have the props of IconButton but also the props of a motion component.
It's beautiful ! Isn't ?

Conclusion

#

I was very patient, demanding, and on the lookout for everything related to Chakra-UI. I've read all the docs, check the source code and I would like to become a Collaborator to Chakra-UI. Never give up on your dreams, perseverance is the key to success. Never forget that.