DEV Community: Tashyn Wallace

Creating a Custom Styled File Input Component with Chakra UI and React Hook Form

Tashyn Wallace — Mon, 23 Oct 2023 02:24:49 +0000

File uploads are a common feature in web applications, but customizing the look and behavior of a file input can be a challenge. In this tutorial, we'll walk you through creating a custom styled file input component using Chakra UI, React Hook Form, and React Dropzone. This component allows users to drag and drop files, ensuring a seamless and intuitive experience. The best part? It's easily adaptable to fit your specific requirements.

The Custom File Input Component:

import { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";
import {
  Center,
  useColorModeValue,
  Icon,
  VStack,
  Text,
  HStack,
  Spacer,
} from "@chakra-ui/react";
import { FiUploadCloud } from "react-icons/fi";
import { AiOutlineClose } from "react-icons/ai";
import { FieldError, FieldErrorsImpl, Merge } from "react-hook-form";

type Props = {
  onFileAccepted: any;
  formError: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
};

export default function FileUploadInput({ onFileAccepted, formError }: Props) {
  const [selectedFile, setSelectedFile] = useState<File>();
  const onDrop = useCallback(
    (acceptedFiles: any) => {
      setSelectedFile(acceptedFiles[0]);
      onFileAccepted(acceptedFiles[0]);
    },
    [onFileAccepted, selectedFile]
  );

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      "application/pdf": [`.pdf`],
    },
    maxFiles: 1,
    multiple: false,
  });

  const activeBg = useColorModeValue("red.50", "red.100");
  const borderColor = useColorModeValue(
    isDragActive ? "red.300" : "gray.300",
    isDragActive ? "red.500" : "gray.500"
  );

  return (
    <Center
      p={10}
      cursor={!selectedFile ? "pointer" : "inherit"}
      w="100%"
      bg={isDragActive ? activeBg : "transparent"}
      _hover={{ bg: activeBg }}
      transition="background-color 0.2s ease"
      borderRadius={4}
      border={formError ? "2px" : "1px"}
      borderColor={formError ? "red.500" : borderColor}
      {...(!selectedFile ? getRootProps() : {})}
    >
      {!selectedFile ? (
        <>
          <input {...getInputProps()} />
          <VStack>
            <Icon as={FiUploadCloud} color="red.600" mr={2} boxSize={6} />
            <Text>
              {!isDragActive ? (
                <>
                  <Text as="span" fontWeight="semibold" color="pink.600">
                    Click to upload
                  </Text>
                  {` `}
                  or drag and drop
                </>
              ) : (
                `Drop the files here ...`
              )}
            </Text>
            <Text fontSize="sm">PDF Only</Text>
          </VStack>
        </>
      ) : (
        <>
          <HStack w="100%" p={5} borderRadius="md" bg="white">
            <Text>{selectedFile?.name}</Text>
            <Spacer />
            <Icon
              as={AiOutlineClose}
              onClick={() => {
                setSelectedFile(undefined);
                onFileAccepted(undefined);
              }}
              cursor="pointer"
            />
          </HStack>
        </>
      )}
    </Center>
  );
}

The FileUploadInput component is the heart of this implementation. It utilizes React Dropzone for drag-and-drop functionality and Chakra UI for styling. This component also seamlessly integrates with React Hook Form, providing perfect type safety for your forms.

File Input in Action

Using the Custom Component in Your Form:

import { Controller } from "react-hook-form";
const {
  register,
  control,
  handleSubmit,
  reset,
  formState: { errors },
} = useForm<ImportDocumentType>({
  resolver: zodResolver(importDocumentSchema),
});

<FormControl isInvalid={Boolean(errors?.documentName)}>
  <FormLabel>Document Name</FormLabel>
  <Input {...register(`documentName`)} />
  <FormErrorMessage>
    {errors?.documentName && errors?.documentName?.message}
  </FormErrorMessage>
</FormControl>

<Divider />

<Controller
  name="file"
  control={control}
  render={({ field: { onChange } }) => (
    <FileUploadInput
      onFileAccepted={(file: any) => onChange(file)}
      formError={errors?.file}
    />
  )}
/>

Here, we demonstrate how to incorporate the custom file input component into your form. It's as simple as using the Controller component from React Hook Form and passing in the FileUploadInput component as the render function. This allows you to manage file uploads with ease.

Customization and Adaptability:

One of the strengths of this approach is its flexibility. You can easily modify the styles, add animations, or tweak functionality to meet your specific project needs. The combination of Chakra UI and React Hook Form provides a powerful foundation for customization.

Creating Scrollable Horizontal Tabs in Chakra UI: A Quick Fix for Responsive Design

Tashyn Wallace — Wed, 27 Sep 2023 18:32:06 +0000

When working with Chakra UI, you may have noticed that by default, tabs are not horizontally scrollable. This can pose a challenge, especially when dealing with a high number of tabs, potentially disrupting your responsive designs.

There's a straightforward solution to this problem that I discovered that involves a little Chakra UI styling. By wrapping the TabList component in a Box and applying some styles, you can easily achieve horizontally scrollable tabs.

<Box overflow="auto" maxWidth="inherit">
        <TabList w={[`max-content`, `100%`, `100%`]}>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
        </TabList>
</Box>

Screenshot Results (mobile view):

Let's break down what's happening here:

Component: This is a versatile container component in Chakra UI. We're using it to wrap our TabList. The overflow property is set to auto for responsive behavior. It means that if the content overflows the box, it will be scrollable.

overflow Property: This controls what happens when content overflows the box. In this case, it's set to auto, allowing the content to be scrollable.

maxWidth Property: We're setting the maxWidth to "inherit", ensuring that the box takes the maximum width available.

Component: This is the component responsible for rendering the list of tabs.

w Property: This is the width property. We're setting it to different values based on screen size using Chakra UI's responsive array.

Implementing this code will give you the desired effect of horizontally scrollable tabs, making it much easier to manage a large number of tabs on your website.

Give it a try and see how it elevates your design and user interaction!

Author
Tashyn Wallace

Including Files in Next.js API on Vercel: A Guide for Email Templates

Tashyn Wallace — Tue, 12 Sep 2023 05:22:09 +0000

Quick Guide:

If you're looking to include static files in your Next.js API on Vercel for use with Nodemailer (or any other purpose) similar to using included files in Netlify's .toml file, you can achieve this by using a combination of readFileSync from the fs package and path.resolve from the path package. For instance, if you have an emails folder in the root directory, with a subfolder named reset_password_email containing both an HTML and a TXT file, you can call these files like so:

Directory example:

const fs = require("fs");
const path = require("path");

const emailHTML = fs.readFileSync(
  path.resolve("./emails", "reset_password_email", "email.html"),
  "utf-8"
);

const emailTXT = fs.readFileSync(
  path.resolve("./emails", "reset_password_email", "email.txt"),
  "utf-8"
);

Now, you can use these variables in your code as needed, for example in Handlebars:

const compiledHTML = Handlebars.compile(emailHTML);
const compiledTXT = Handlebars.compile(emailTXT);

Explanation:

When working with Next.js and serverless functions on Vercel, it's important to note that static files in the root directory aren't automatically bundled with your serverless function. To access these files, you'll need to use Node.js's built-in fs module to read them.

path.resolve is used to generate the correct file path, ensuring it works both locally during development and when deployed on Vercel. It's a more robust way to construct file paths compared to manually concatenating strings.

By following this approach, you can seamlessly integrate static files like email templates into your Next.js API, enabling you to send personalized emails with ease.

Remember, always handle sensitive information like email templates with care, ensuring they are securely stored and accessed. With this technique, you have the flexibility to incorporate various types of files into your Next.js projects.

Author:
Tashyn Wallace

Building Your Own Patient Appointment App: A Comprehensive Tutorial

Tashyn Wallace — Sun, 10 Sep 2023 05:55:48 +0000

Introduction:
Embark on a journey to create a powerful Patient Appointment App from scratch. In this tutorial, we'll be using Next.js, NextAuth, Chakra UI, React Query, React Hook Form, and MongoDB to craft a seamless booking experience. And the best part? The entire project is open-source and available for free.

Why This Tutorial?
Learn by doing. Dive deep into the world of Next.js, harnessing the power of Chakra UI for stunning design, and leverage React Query and React Hook Form for smooth data management. By the end of this tutorial, you'll have a fully functional Patient Appointment App at your fingertips.

Key Features:

Seamlessly book appointments with registered doctors.
User authentication and doctor sign-up functionality.
Utilize MongoDB for robust data management.
Getting Started:
Ready to roll up your sleeves? Access the complete source code on the GitHub repository, and find additional resources in the about section.

Exploring the App:
See the Patient Appointment App in action by visiting the live demo. Test out the features, from booking appointments to managing your doctor profile.

Conclusion:
Building a Patient Appointment App has never been more accessible. With this tutorial, you not only acquire valuable technical skills but also have a fully functional app as a result. Embrace the freedom of open-source development and create your own appointment booking platform today!

Images:

Navigating Waves of Information: The Caribbean Violence Web Crawler

Tashyn Wallace — Sun, 10 Sep 2023 05:48:34 +0000

Introduction:
Dive into the heart of Caribbean safety with the Caribbean Violence Tracker. Crafted with TypeScript, Node.js, and Next.js, this innovative tool scours trusted sources across the islands, delivering real-time updates on gun and violent crimes.

Empowered Insights, Informed Action:
Unleashing the potential of web crawling, our app provides instant access to vital safety data. Stay in the loop, making informed choices for your well-being.

Uniting Communities, Fostering Safety:
In times of challenge, unity is our anchor. The Caribbean Violence Tracker serves as a digital lighthouse, illuminating pathways to safety. Share insights, raise awareness, and strengthen your community.

Accessing the Caribbean Violence Tracker:
Ready to take control of your safety? Set sail with the Caribbean Violence Tracker and chart a course to real-time incident updates.

Conclusion:
More than code, this is a commitment to Caribbean security. Join us on this technological voyage toward safer, more connected communities. Embrace the Caribbean Violence Web Crawler today!

Images:

AI-Powered Quiz Generation: Introducing QwizLab with NextJS

Tashyn Wallace — Sun, 10 Sep 2023 05:39:20 +0000

Discover QwizLab, a NextJS app that leverages the power of AI to transform your notes into quizzes. Say goodbye to manual quiz creation and hello to a smarter, more efficient learning experience.

Unleashing the AI Advantage:
QwizLab harnesses OpenAI's capabilities to automatically generate quizzes from your notes. Dive into your studies without the hassle of crafting questions.

Total Control, Effortless Editing:
Take charge of your quizzes. With QwizLab, you can create, edit, and delete questions with ease, ensuring your quizzes are perfectly tailored.

Export and Share:
Need to collaborate or study offline? QwizLab lets you export quizzes effortlessly, making sharing and studying with peers a breeze.

Get Started:
Join the future of learning. Visit QwizLab here and sign up!

Conclusion:
QwizLab is your shortcut to smarter studying. Embrace the power of AI for a more effective learning journey. Try QwizLab today!

Images: