# Amai Mtoto --- ## Spike!  --- ## What to look for in libraries: - Updated recently - Amount of downloads [ reliability ] - Versioning --- ## [Material UI](https://mui.com/) - Yassien  ---- Pros: - largest UI community in the React ecosystem (2 million+ weekly downloads). - updated recently (2 days ago) - docs and syntax seem simple enough to understand ---- eg: ```javascript import * as React from 'react'; import Button from '@mui/material/Button'; export default function MyApp() { return ( <div> <Button variant="contained">Hello World</Button> </div> ); } ``` ---- Cons: - Couldn't get it to work on bookbrroch project when testing; kept getting "cannot read properties of undefined (reading 'button')" error --- ## Tailwind - Alex Pros: Has already styled components/templates Fully responsive Docs are pretty straight forward Similar to Bootstrap but more flexible Cons: Not all components are free Can be very long and messy ``` <svg className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]" viewBox="0 0 1155 678" fill="none" xmlns="http://www.w3.org/2000/svg" >  ``` --- ## Forum - Patrick  --- ## Chatbot - Patrick [React Chatbot Kit](https://www.npmjs.com/package/react-chatbot-kit)  Stats: - 800+ downloads - Last updated yesterday - Well documented Pros: - Easy to install: ```npm i react-chatbot-kit``` Cons: - Harder to customize - Not a good 'out of the box' experience - Initial setup required ---- [React Best Chatbot](https://lucas-fernando.vercel.app/react-best-chatbot) Stats: - 9 weekly downloads - Last updated 6 months ago - Very well documented Pros: - Good out of the box experience --- ## Github Actions - Yassien Pros: - automate things like; assigning issues to project board, assigning reviewers for pull requests, running tests on push - the github docs seem reasonably extensive ---- Cons: - written in YAML so we'd have to learn how to implement it - since our project isn't very big (only 4 devs not 400) or very long (just 3 weeks), is it worth spending time learning how to implement when the potential time savings from using it are minimal? (i.e. we can just run all tests before pushing ourselves) --- # Headless CMS Strapi - Alex Strapi Weekly Downloads: **16,912** Downward curve  Firebase Weekly Downloads: **1,369,293** Steady flow  Decided to not use it. Create custom url which contains a form for Ros to upload data --- ## Carousel - Sumithra https://alvarotrigo.com/blog/react-carousels/ Swiper - Free https://github.com/nolimits4web/swiper https://www.npmjs.com/package/swiper https://swiperjs.com/get-started  --- ## Tabs - Patrick ### [react-tabs](https://www.npmjs.com/package/react-tabs) Stats: 558k+ weekly downloads last updated 7 months ago Documentation might be an issue, although seems easy to use Pros: Popular Easy to use Easy to customize Easy to make it navigable using the keyboard Cons: Can't think of any. Solid package Need to check how the screen reader handles the content  --- ## Nav - Yassien ---- - react-site-nav by Yusinto Ngadiman  ---- - react-responsive-animate-navbar  ---- ...but.... ---- last updated 4 and 3 years ago respectively  --- ## Wave web accessibiliDev extension reactty evaluation - Sumithra https://wave.webaim.org/  --- ## [Chakra UI Templates](https://chakra-templates.dev/page-sections/features) ---