Dexter  Goodwin

Dexter Goodwin

1636980600

Why My Favourite Part About Chakra UI?

I didn’t plan to use any UI library like Bootstrap or others in my latest React project in the first place. But in the middle of the work, which is still in progress right now (which you could see here😝), I remembered Chakra UI and decided to just give it a shot, because my project kept getting more complex and I needed to get a simple component ready quickly.

Turns out I really like Chakra because they have some sort of ‘shorthand’ component and even shorter props. We’ll have a talk about it later on. I also like the way we style the component because it is through props, which I prefer over having a long className. But actually, it really depends on who’s working on it based on their preferences, and of course, the convenience of doing responsive stuff — making it work can sometimes take a while.

#Chakra #javascript 

Why My Favourite Part About Chakra UI?

Build A Tree Structures in React

Learn how to build an interactive family tree (or any tree structure) in React.js. We will implement a breadth-first-search algorithm in TypeScript to dynamically insert nodes into our tree!

Links: https://github.com/jonasgroendahl/react-d3-tree-bfs (differs slightly from the video implementation, we use ids here instead of names)

#nextjs #Chakra #react-native #ui 

Build A Tree Structures in React

The Simple Way To Build Chakra UI Responsive Sidebars

Code a beautiful sidebar navigation using Chakra UI.

Helpful Links:
Code: https://github.com/bjcarlson42/chakra-left-responsive-navbar

0:00 Introduction
0:22 Starter files
0:58 Sidebar.js
6:22 NavItem.js
11:42 NavHoverBox.js
14:23 Conclusion

 

#Chakra 

The Simple Way To Build Chakra UI Responsive Sidebars

Simple Building Dribbble Dashboard using Chakra UI and Next.js

Code along as I take a Dribbble dashboard design and code it using Chakra UI and Next.js! Along with Chakra UI, we use the react hook useState to make the content a bit more dynamic. This dashboard is fully responsive and follows best practices! This design uses the default Chakra UI theme but if you have a custom theme, you can modify it accordingly.

Helpful Links:
Code: https://github.com/bjcarlson42/chakra-nextjs-dashboard
Demo: https://chakra-nextjs-dashboard.vercel.app/dashboard
Chakra Docs: https://chakra-ui.com/
Chart.js Docs: https://www.chartjs.org/docs/latest/
React chart 2 docs: http://reactchartjs.github.io/react-chartjs-2/#/
Feather React Icons: https://react-icons.github.io/react-icons/icons?name=fi
Dribbble Design: https://dribbble.com/shots/15640240/attachments/7432009?mode=media

 

#Chakra #next 

Simple Building Dribbble Dashboard using Chakra UI and Next.js

How to easily build a Hamburger Navigation Menu using Chakra-UI with Next.js

Learn how to make a hamburger navbar using chakra! Chakra does not come with an out of the box solution but we can easily use useState and css display to create one! You can easily change the look and feel of the nav bar by styling the Flex or Box elements, and easily use framer motion to add some animation!


Get the starting code: https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui

 

0:00 Introduction
0:09 Channel Announcement
0:30 Introduction Continued
1:23 Importing Everything We Need
1:49 Creating The Desktop Navigation
4:23 Adding The Hamburger Nav Button
5:43 Creating The Mobile Navigation
7:37 Using useState To Dynamically Open And Close The Mobile Menu
9:35 Conclusion

 

#Chakra #next 

How to easily build a Hamburger Navigation Menu using Chakra-UI with Next.js