Forem: Zee Yass

Handle Click Outside React Component.

Zee Yass — Wed, 08 Jun 2022 11:08:06 +0000

In this tutorial we are going to make a dropdown component, creating the drop down functionality, and then handling the click outside, it's a perfect use case on how to handle click outside a react comoponent, let's do that 🔥

first create a dropdown button, for this am using a free element from the taillwind ui library kit:

export function DropDown() {
    return(
        <div className="relative inline-block text-left">
                <div>
                    <button type="button" className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="menu-button" aria-expanded="true" aria-haspopup="true">
                        Options
                        <svg className="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                        </svg>
                    </button>
                </div>
                <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button">
                    <div className="py-1" role="none">
                        <a href="#" className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" id="menu-item-0">Account settings</a>
                        <a href="#" className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" id="menu-item-1">Support</a>
                        <a href="#" className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" id="menu-item-2">License</a>
                        <form method="POST" action="#" role="none">
                            <button type="submit" className="text-gray-700 block w-full text-left px-4 py-2 text-sm" role="menuitem" id="menu-item-3">Sign out</button>
                        </form>
                    </div>
                </div>
            </div>
    );
}

till now the button has no dropdown effect, let's add some state to handle this.

import { useState } from "react";
export function DropDown() {
     const [dropDownOpen, setDropDownOpen] = useState(false)
     const toggleDropDown = () => setDropDownOpen(!dropDownOpen)
      ...
    {/* allow the button to change state */}
     <button 
      ...
     onClick={toggleDropDown}>
      ...
    {/* show the options area based on the dropdown state */}
    { dropDownOpen &&
                <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button">
                    <div className="py-1" role="none">
                        <a href="#" className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" id="menu-item-0">Account settings</a>
                        <a href="#" className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" id="menu-item-1">Support</a>
                        <a href="#" className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" id="menu-item-2">License</a>
                        <form method="POST" action="#" role="none">
                            <button type="submit" className="text-gray-700 block w-full text-left px-4 py-2 text-sm" role="menuitem" id="menu-item-3">Sign out</button>
                        </form>
                    </div>
                </div>}
    ...

Cool, the dropdown works fine now, but nothing happen when we click outside, let's use the useEffect() and useRef() react hooks to get the desired result.

import { useEffect, useRef, useState } from "react";
export function DropDown() {
...
const dropDownRef = useRef<HTMLDivElement>(null);

//change dropdown state to false when clicking outside.
useEffect(() => {
        function handler(event:any) {
            if(!dropDownRef.current?.contains(event.target)) {
                setDropDownOpen(false);
            }
        }
        window.addEventListener('click', handler)
        return () => window.removeEventListener('click', handler)
    }, []);
...
return(
        <div 
        ref={dropDownRef}
        ...>
...

you see how this is easy, before finishing the tutorial why not adding some transition effect to the dropdown area, for this let's use the Transition component from headles ui.
npm install @headlessui/react
full code of the component.

import { Transition } from "@headlessui/react";
import { useEffect, useRef, useState } from "react";

export function DropDown() {
    const [dropDownOpen, setDropDownOpen] = useState(false);
    const toggleDropDown = () => setDropDownOpen(!dropDownOpen)
    const dropDownRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        function handler(event: any) {
            if (!dropDownRef.current?.contains(event.target)) {
                setDropDownOpen(false);
            }
        }
        window.addEventListener('click', handler)
        return () => window.removeEventListener('click', handler)
    }, []);

    return (
        <div
            ref={dropDownRef}
            className="relative inline-block text-left">
            <div>
                <button
                    type="button"
                    className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="menu-button" aria-expanded="true" aria-haspopup="true"
                    onClick={toggleDropDown}>
                    Options
                    <svg className="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
                    </svg>
                </button>
            </div>
            <Transition
                show={dropDownOpen}
                enter="transition ease-out duration-100"
                enterFrom="transform opacity-0 scale-95"
                enterTo="transform opacity-100 scale-100"
                leave="transform opacity-100 scale-100"
                leaveFrom="transform opacity-100 scale-100"
                leaveTo="transform opacity-0 scale-95">
                <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button">
                    <div className="py-1" role="none">
                        <a href="#" className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" id="menu-item-0">Account settings</a>
                        <a href="#" className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" id="menu-item-1">Support</a>
                        <a href="#" className="text-gray-700 block px-4 py-2 text-sm" role="menuitem" id="menu-item-2">License</a>
                        <form method="POST" action="#" role="none">
                            <button type="submit" className="text-gray-700 block w-full text-left px-4 py-2 text-sm" role="menuitem" id="menu-item-3">Sign out</button>
                        </form>
                    </div>
                </div>
            </Transition>
        </div>
    );
}

to learn more i am sharing my #buildinpublic journey on twitter.
hope this was helpful, stay tunned for my upcoming serie on scaffolding authentication with Remix.

Newsletter subscription with Remix and Convertkit.

Zee Yass — Fri, 03 Jun 2022 11:57:16 +0000

Used by persons and businesses, newsletter is now very important to any email marketing strategy, it allow you to share important and valuable content with your network of customers.

in this tutorial we are going to setup a newsletter subscription with Remix and Conevrtkit, let's do that.

we are going to need: 👇

convertkit API key.
convertkit Form Id.
fresh installation of remix.

Get convertkit API key and Form Id.
go to account>settings>advanced.

chose any created form and get the id.

in your _.env_

CONVERTKIT_API="https://api.convertkit.com/v3"
CONVERTKIT_API_KEY="your_api_key"
CONVERTKIT_FORM_ID="your_form_id"

make a route newsletter.tsx and create a form inside.
i use tailwindcss for the styling.

import { Form } from "@remix-run/react";

export default function Newsletter() {

    return (
    <div className="flex items-center justify-center h-screen bg-gray-100">
        <div className="flex flex-col items-center space-y-4">
            <h1 className="font-bold text-2xl text-gray-700 w-4/6 text-center">
                NewsLetter.
            </h1>
            <p className="text-sm text-gray-500 text-center w-5/6">
                Join our Newsletter and get weekly news.
            </p>
            {/* Newsletter form*/}
            <Form method="post">
                <input
                    name="email"
                    type="text"
                    placeholder="type your mail"
                    className="border-2 rounded-lg w-full h-12 px-4" />
                <button
                    type="submit"
                    className="bg-red-400 text-white rounded-md hover:bg-red-500 font-semibold px-4 py-3 w-full">
                    Subscribe
                </button>
            </Form>
        </div>
    </div>
    );
}

add remix action and get the submitted value.

...
import { ActionFunction } from "@remix-run/node";

export const action: ActionFunction = async({request}) => {
    const formData = await request.formData();
    const email = formData.get("email");
    console.log(email);
    ...
}

...

after getting the submitted email we can now make a post request to convertkit api and subscribe our user.

...
export const action: ActionFunction = async({request}) => {
    ...
    const API_URL = process.env.CONVERTKIT_API;
    const API_KEY = process.env.CONVERTKIT_API_KEY;
    const FORM_ID = process.env.CONVERTKIT_FORM_ID;
    const res = await fetch(`${API_URL}/forms/${FORM_ID}/subscribe`, {
        method: "post",
        body: JSON.stringify({ email, api_key: API_KEY }),
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        },
      });

    return await res.json();
}

now we can handle the subscription state, and update ui accordingly, using useActionData and useTransition hooks.

...
export default function Newsletter() {
    // add remix hooks to handle state.
    const actionData = useActionData();
    const transition = useTransition();
    let submitting = transition.submission;

    return (
    <div className="flex items-center justify-center h-screen bg-gray-100">
        <div className="flex flex-col items-center space-y-4">
            <h1 className="font-bold text-2xl text-gray-700 w-4/6 text-center">
                NewsLetter.
            </h1>
            <p className="text-sm text-gray-500 text-center w-5/6">
                Join our Newsletter and get weekly news.
            </p>
            {/* Newsletter form*/}
            <Form method="post">
                <input
                    name="email"
                    type="text"
                    placeholder="type your mail"
                    className="border-2 rounded-lg w-full h-12 px-4" />
                    {/* If subscription succeeded*/}
                    {actionData?.subscription && <p className="w-full text-center text-sm text-green-500">
                      Please check your email, and confirm subscription. 
                    </p>}
                    {/* If subscription failed*/}
                    {actionData?.error && <p className="w-full text-center text-sm text-red-500">
                      {actionData.message}  
                    </p>}

                    {/* update button status when submitting*/}
                <button
                    type="submit"
                    className="bg-red-400 text-white rounded-md hover:bg-red-500 font-semibold px-4 py-3 w-full mt-2">
                    {submitting ? "Subscribing ..." : "Subscribe"}
                </button>
            </Form>
        </div>
    </div>
    );

this is a basic implementation of newsletter subscription, you can optimize further the ui, using the power of remix and react hooks.

et voila, hope this help you creating your newsletter with remix and convertkit, to learn more, i'm sharing my #buildinpublic journey on twitter.