3 UI bibliotek vi gillar för React!

På vägen har vi hittat flera ramverk som vi uppskattat för olika anledningar. Här är tre stycken vi vill dela med oss av för hur enkla de varit att implementera och bygga med.

Framer Motion

Framer Motion är ett open source bibliotek från Framer som hjälper oss att komponera animationer till våra React-projekt. Det underlättar för oss utvecklare att lägga till visuellt fångande element för att väcka intresset och leda användarens blick över sidan.

Vi skapar motion komponenter genom att importera motion och sedan ange det HTML eller SVG elementet vi vill använda, i.e. <motion.div> </motion.div>, sen kan vi låta kreativiteten flöda.

Men kom ihåg även om vi inte vill det så finns det något som heter för mycket animationer, men det blir svårt att låta bli när det är så lätt…

👇  En klassisk fade in för en bit text och en animation på hover.

Javascriptimport React from "react";
import { motion } from "framer-motion";
 
const MyMotionComponent = () => {
 const headers = {
   hidden: { opacity: 0, y: 30 },
   visible: {
     opacity: 1,
     y: 0,
     transition: { duration: 2, ease: "easeOut" },
   },
 };
 const paragraphs = {
   hidden: { opacity: 0, y: 30 },
   visible: {
     opacity: 1,
     y: 0,
     transition: { duration: 1.5, delay: 0.5, ease: "easeOut" },
   },
 };
 
 return (
   <motion.div whileHover={{ x: 50 }}>
     <motion.h2 initial="hidden" animate="visible" variants={headers}>
       Hello World!
     </motion.h2>
     <motion.p initial="hidden" animate="visible" variants={paragraphs}>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
       sapiente!
     </motion.p>
   </motion.div>
 );
};
 
export default MyMotionComponent;

Dokumentation: https://www.framer.com/docs/

Github: https://github.com/framer/motion

Chakra UI

Chakra UI är ett React-bibliotek med både komponenter och hooks som låter oss snabbt bygga snygga gränssnitt. Det är ett väldokumenterat open source bibliotek som byggts med Emotion och Styled systems.

De färdiga komponenterna är lätta och intuitiva att använda men även enkla att modifiera efter dina önskemål. Bibliotekets standard tema är även enkelt att anpassa med extendTheme funktionen så att det passar ditt projekts design.

💡 Förutom det är enkelt att implementera så följer Chakra UI även webb tillgänglighets intiativet, WAI-ARIA.

👇 Hur snabbt och lätt det är att plocka in de färdiga komponenterna och modifiera.

Javascriptimport React from "react";
import { Box, Select } from "@chakra-ui/react";
 
const MyChakraComponent = () => {
 return (
   <Box borderWidth="2px" p={7} borderRadius='lg'>
     <Select placeholder="Select one" bg='tomato' color='white' variant='filled'>
     <option value="option1">Option 1</option>
     <option value="option2">Option 2</option>
     <option value="option3">Option 3</option>
     </Select>
   </Box>
 );
};
 
export default MyChakraComponent;

Dokumentation: https://chakra-ui.com/guides/getting-started/nextjs-guide

Github: https://github.com/chakra-ui/chakra-ui/

Styled-components

Styled components, nog ett av våra mest använda bibliotek, det är ett oerhört populärt open source bibliotek som låter oss att kombinera JavaScript och CSS på ett intuitivt sätt.

Med styled-components skapar vi stylade React-komponenter som vi sen enkelt kan återanvända i vår kod. En stor fördel är också att det är väldigt dynamiskt och vi kan vid run time justera vår styling. Vi slipper även klassnamns krockar då styled-components genererar unika klass namn för vår styling.

Förutom att underlätta för den kreativa processen så blir det även lättare att underhålla och orientera bland sina komponenter när allt som bygger upp komponenten kan återfinnas på ett och samma ställe.

👇 Hur vi implementerat styled-components för att bygga en enkel kort-komponent

Javascriptimport React from "react";
import styled, { css } from "styled-components";

const Container = styled.div`
width: ${props => props.width ? props.width : "fit-content"};
height: 300px;
border-radius: 5px;
overflow: hidden;
`;

const Thumbnail = styled.div`
background-color: turquoise;
width: 100%;
height: 40%;

${props => props.bgImage && css`
background-image: url(${props.bgImage});
background-size: cover;
background-position: center;
`}`;

const MyStyledComponent = () => {
  return (
    <Container width="200px">
      <Thumbnail bgImage="https://images.unsplash.com/photo-1588653818221-2651ec1a6423?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=80"/>
          <h3 size="25px">Hello World!</h3>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem, sequi?</p>
    </Container>
  );
};

export default MyStyledComponent;

Dokumentation: https://styled-components.com/docs/basics#getting-started

Github: https://github.com/styled-components/styled-components

Vet du något bibliotek som du skulle rekommendera?