DEV Community: vibhanshu pandey

You Probably Don't Need Redis for Distributed Locking

vibhanshu pandey — Thu, 25 Dec 2025 06:54:26 +0000

TL;DR
PostgreSQL advisory locks are the simplest and safest choice when your app is already using Postgres, and you want correctness (mutual exclusion and crash safety) with minimal operational complexity. Redis locks (SET NX EX + owner token + Lua release) are flexible, fast, and useful when you need cross-database/technology coordination or lower-latency coordination. Still, they require careful handling (atomic release, TTL vs action duration, renewal, and secure deployment) to avoid split-brain and lost-mutual-exclusion scenarios.

Introduction

Distributed locks coordinate access to shared resources across multiple processes or machines. Correct locking avoids race conditions, duplicate work, and data corruption. Two common primitives for implementing distributed locks are:

PostgreSQL advisory locks — lightweight, DB-managed mutexes.
Redis-based locks (SET NX EX + owner token + atomic release) — popular for their speed and network friendliness.

This post walks through the trade-offs, real-world pitfalls, and production-ready code patterns for both approaches so you can choose confidently.

Problem statement

You need a mechanism to enforce mutual exclusion across processes (possibly running on different hosts) that:

Guarantees only one client can hold the lock at a time (mutual exclusion).
Releases the lock on client failure (crash-safety / no ghost locks).
Supports reasonable timeouts/retries.
Works with connection pools and long-running critical sections, or at least provides safe patterns for those cases.

Additionally, you want to keep operational complexity low and avoid rare but catastrophic failures like split-brain or data corruption.

Available solutions

High-level options:

Postgres advisory locks (pg_try_advisory_xact_lock, pg_advisory_xact_lock, pg_try_advisory_lock, pg_advisory_lock) — stored in Postgres lock manager, tied to session or transaction.
Redis locks using SET key value NX EX seconds for acquire, plus an atomic Lua script to release only if the stored owner token matches.
External coord systems — etcd, Consul, ZooKeeper — provide strong coordination guarantees at the cost of additional infra.
Table-based locks in Postgres (a durable table row representing lock state) — works but is more complex (needs fencing tokens, cleanup) and slower.

This post compares the two most common pragmatic choices: Postgres advisory locks and Redis locks.

Pros and cons: Postgres advisory locks vs Redis locks

Aspect	PostgreSQL advisory locks	Redis locks (SET NX EX + token + Lua)
Mutual exclusion	✅ Strong — enforced by Postgres lock manager	✅ Strong if implemented correctly (atomic acquisition + correct release)
Crash safety	✅ If transaction-scoped: lock released when session/transaction ends (DB manages lifecycle)	✅ If TTL short & renewal used carefully; otherwise risk if TTL expires while holder still running
Durability / WAL	Advisory locks are an in-memory lock manager (not WAL) but bound to the DB session/transaction. Locks survive a process crash because the DB closes the session.	Not durable — lock state is in Redis memory. If Redis fails, locks disappear.
Lock lifetime control	Tied to transaction or session lifecycle; safe and automatic	TTL-based; you must manage expiry vs action duration, plus optional renewal
Blocking vs non-blocking	Both options: blocking (`pg_advisory_xact_lock`) or non-blocking (`pg_try_advisory_xact_lock`)	Non-blocking via `SET NX EX`; blocking behavior implemented via client-side retry
Ease of implementation	Very simple when you already use Postgres; few lines of SQL	Simple to acquire, but correct release requires Lua and careful handling (owner token, renewal)
Scalability / performance	Very fast for typical web scale; limited by DB as central point	Very fast and lightweight; Redis is designed for high throughput
Failover / HA complexity	If DB primary changes (failover), clients must reconnect to primary for locks to be meaningful; advisory locks are local to each instance.	Redis cluster & sentinel/replica setups have their own failover semantics — must be careful not to use a single node without protection
Replication / read replicas	Advisory locks live on the server holding them; read replicas do not replicate lock state — clients must acquire locks on the primary.	Redis replication does not replicate ephemeral ownership at the right times if failover occurs; use proper Redis HA patterns
Tooling & observability	`pg_locks` view to inspect advisory locks	Redis keys / TTL show lock state; use scripts to inspect
Security considerations	Uses DB auth + SQL parameters; avoid SQL injection in key hashing	Requires secure Redis (AUTH, TLS, ACLs), avoid exposing Redis publicly
Best fit	If your application already uses Postgres and the critical section should be protected by DB transaction semantics	If you need very low-latency locks, a separate coordination layer, or have multi-database/technology consumers

Code example: PostgreSQL advisory lock (Spring Boot)

Below is a production-ready transaction-scoped pattern using pg_try_advisory_xact_lock with retry, jitter, and safe transaction semantics. This pattern is safe with connection pools (HikariCP) and ensures the lock is released at commit/rollback time.

@Service
public class AdvisoryLockService {

    private final JdbcTemplate jdbcTemplate;
    private static final Duration LOCK_RETRY_INTERVAL = Duration.ofMillis(50);

    public AdvisoryLockService(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @Transactional
    public <T> T withLock(String lockKey, Duration timeout, ThrowingSupplier<T> action) {
        long deadline = System.nanoTime() + timeout.toNanos();

        while (System.nanoTime() < deadline) {
            Boolean acquired = jdbcTemplate.queryForObject(
                "SELECT pg_try_advisory_xact_lock(hashtext(?))",
                Boolean.class,
                lockKey
            );

            if (Boolean.TRUE.equals(acquired)) {
                try {
                    return action.get(); // runs inside same transaction
                } catch (RuntimeException | Error e) {
                    throw e; // let Spring roll back the transaction
                } catch (Exception e) {
                    throw new RuntimeException(e);
                }
            }

            // polite backoff + jitter
            long jitterNanos = (long) (Math.random() * 20_000_000L); // 0-20ms
            LockSupport.parkNanos(LOCK_RETRY_INTERVAL.toNanos() + jitterNanos);
        }

        throw new LockTimeoutException("Could not acquire lock: " + lockKey + " within " + timeout);
    }
}

Notes & best practices

Use pg_try_advisory_xact_lock (transaction-scoped) to avoid leaking locks through pooled sessions. If your code uses pg_advisory_lock (session-scoped), you must ensure the connection is closed or explicitly unlocked — not recommended with pools.
Keep the critical section short to avoid blocking DB resources.
If the action opens new transactions with REQUIRES_NEW, be careful: the new transaction is outside the transaction holding the advisory lock, so the lock may not protect work done in REQUIRES_NEW.
Use parameterized queries (?) to avoid injection; hash the key with hashtext() or your own stable hash to map to 64-bit key(s).

Code example: Redis lock (SET NX EX + token + Lua release + renewal + SCAN)

This pattern shows safe acquire, atomic release using Lua, optional renewal for long-running actions, and SCAN usage for key iteration.

private static final String RELEASE_SCRIPT =
  "if redis.call('get', KEYS[1]) == ARGV[1] then " +
  "  return redis.call('del', KEYS[1]) " +
  "else return 0 end";

private void releaseLock(String lockKey, String lockValue) {
    try (Jedis jedis = jedisPool.getResource()) {
        jedis.eval(RELEASE_SCRIPT, 1, lockKey, lockValue);
    }
}

@Override
public <T> T withLock(String lockKey, Duration timeout, ThrowingSupplier<T> action) throws Throwable {
    String lockValue = UUID.randomUUID().toString();
    long deadline = System.nanoTime() + timeout.toNanos();

    try (Jedis jedis = jedisPool.getResource()) {
        while (System.nanoTime() < deadline) {
            SetParams params = SetParams.setParams().nx().ex(timeout.toSeconds());
            String result = jedis.set(lockKey, lockValue, params);

            if ("OK".equals(result)) {
                // Start lock renewal thread
                Thread renewer = startLockRenewer(lockKey, lockValue, timeout);
                try {
                    return action.get();
                } finally {
                    renewer.interrupt(); // stop renewal
                    releaseLock(lockKey, lockValue);
                }
            }

            LockSupport.parkNanos(LOCK_RETRY_INTERVAL_MS.toNanos());
        }
    }

    throw new TimeoutException("Could not acquire lock: " + lockKey + " within " + timeout);
}

// Renew lock every half of TTL
private Thread startLockRenewer(String lockKey, String lockValue, Duration ttl) {
    Thread thread = new Thread(() -> {
        try (Jedis jedis = jedisPool.getResource()) {
            while (!Thread.currentThread().isInterrupted()) {
                Thread.sleep(ttl.toMillis() / 2);
                String current = jedis.get(lockKey);
                if (lockValue.equals(current)) {
                    jedis.expire(lockKey, (int) ttl.toSeconds());
                } else {
                    break; // lost lock
                }
            }
        } catch (InterruptedException ignored) {
        }
    });
    thread.setDaemon(true);
    thread.start();
    return thread;
}

Acquire-with-retry + renewal example (outline)

Generate lockValue = UUID.randomUUID().toString().
Attempt SET NX EX with TTL = desired TTL (must be longer than expected action duration or use renewer).
If acquired:
- Start a renewer thread that periodically extends TTL while verifying ownership.
- Execute action; finally, stop the renewer and run the atomic release Lua script.
If not acquired: sleep with jitter and retry until timeout.

SCAN usage for key iteration

Replace jedis.keys(pattern) with an iterative SCAN:

List<String> scanKeys(Jedis jedis, String pattern) {
    String cursor = ScanParams.SCAN_POINTER_START;
    List<String> out = new ArrayList<>();
    ScanParams params = new ScanParams().match(pattern).count(100);
    do {
        ScanResult<String> res = jedis.scan(cursor, params);
        cursor = res.getCursor();
        out.addAll(res.getResult());
    } while (!cursor.equals(ScanParams.SCAN_POINTER_START));
    return out;
}

Important Redis caveats

SET NX EX + value token + atomic Lua release is required to avoid deleting locks held by others.
TTL must be chosen carefully; renewal must be used if you expect actions to possibly exceed TTL.
If Redis goes down and is restored, locks may disappear → be prepared for concurrent execution.
Avoid KEYS command in production; prefer SCAN.

Security considerations

General

Treat locks as part of your security/consistency boundary: a compromised lock server = compromised coordination.
Carefully validate and sanitize lock keys, especially if derived from user input. Use hashing and parameter binding where applicable.

For Postgres advisory locks

Use DB credentials with least privilege — typically, your app DB user already has permission.
Avoid passing raw user input directly into SQL text; use parameterized queries (?) so the driver escapes values properly.
Ensure DB connections (and application) use TLS if DB is accessed over untrusted networks.
Restrict who can run arbitrary SQL (admins) — advisory locks are just SQL functions.

For Redis locks

Configure Redis with AUTH and ACLs; do not leave it unauthenticated on the network.
Use TLS for Redis connections if the network is not fully trusted.
Restrict Redis access via firewall / VPC security groups; never expose Redis to the public internet.
Use unique random lock tokens (UUIDs) and never rely on predictable values.
Use atomic release via a Lua script to prevent race conditions.
Beware of Redis persistence/replication failover: if failover leads to split-brain, you can get double-acquire. Consider Redis Cluster, Sentinel or managed Redis offerings with proven HA.

Behaviour with read replicas (Postgres)

Advisory locks live on a single Postgres instance (on the server’s lock manager). Important implications:

Locks are local to the server instance where they were taken — they are not replicated to read replicas.
If your app reads from read replicas, those reads do not see or enforce advisory locks. This is fine — locks enforce mutual exclusion for writers/transactions that also use the same primary.
Acquire and release locks on the primary (the node accepting writes). If your application sometimes connects to replicas for read-only operations and accidentally tries to take locks there, those locks will not coordinate with locks on the primary (bad).
During primary failover, existing DB connections are dropped, and advisory locks are cleared — survivors should reconnect to the new primary and reacquire locks if required. That behaviour is safe (no phantom locks held without a live client), but it means locks don’t survive failover, and you must be tolerant of lock loss across failover.
For high-availability locking across DB failover, advisory locks alone aren’t a silver bullet. If you need lock survival across failovers, consider an external coordination service (etcd, Consul) or design the application to re-acquire locks after reconnection.

Practical rules

Always point lock acquisition calls to the current write primary. If you use a DB proxy/load-balancer, configure it to route lock-taking queries to the primary.
Don’t rely on advisory locks for cross-cluster coordination where the cluster can partition; advisory locks work best for single-primary topologies.

Summary

When to use PostgreSQL advisory locks

You already use Postgres, and your critical section is naturally tied to the DB transaction.
You want correctness and simplicity: automatic release on session/transaction end, no separate lock service to run.
You prefer to avoid external infra and want transactional semantics.

When to use Redis locks

You need a separate coordination layer or ultra-low-latency locking across polyglot systems.
You can invest in the required safeguards: atomic Lua release, TTL management, renewal, and robust Redis HA.
You accept the operational complexity and the model where locks are TTL-based rather than transaction-bound.

Key takeaways

Advisory locks are simple, safe, and correct for DB-centric workflows — use pg_try_advisory_xact_lock inside transactional code with retries and jitter.
Redis locks are fast and flexible but require careful implementation (atomic release, renewal) to avoid split-brain and concurrency hazards.
Avoid KEYS in Redis — use SCAN.
Never use session-scoped Postgres locks with pooled connections unless you manage session lifecycles strictly.
For heavy production usage, add logging, metrics, backoff + jitter, and robust error handling to whichever strategy you pick.

Bulletproof Your Node.js Backend: Manage Environment Variables with Confidence

vibhanshu pandey — Sat, 15 Apr 2023 11:00:02 +0000

Pretext

Managing environment variables is a crucial aspect of building robust and secure Node.js applications. These variables contain sensitive information such as API keys, database credentials, and other configuration details that your application needs to function properly. However, managing environment variables can quickly become a headache, especially when dealing with multiple environments, team members, and deployment scenarios.

One of the most significant pain points of environment variable management is the lack of type safety. Without type safety, it's easy to introduce bugs and security vulnerabilities, as developers may accidentally use the wrong variable or misspell its name. Additionally, environment variables can be difficult to keep track of, as they're often scattered across different files and deployment environments.

Fortunately, there are solutions to these problems. In this blog post, we'll explore how to manage environment variables in a type-safe manner using TypeScript. We'll look at why type safety is essential, how it can help prevent bugs and security issues, and best practices for implementing it in your Node.js backend. By the end of this post, you'll have a better understanding of how to manage your environment variables with confidence and peace of mind.

The Problem

Using dotenv for environment variable management doesn't allow breaking up the environment variables into different files like .env, .env.development, and .env.production, among others. Additionally, it doesn't allow for variable expansion. For instance, when using dotenv, the following code will not work:

APP_NAME="My app name"
APP_DESCRIPTION="$APP_NAME is awesome"

Now, I expect APP_DESCRIPTION to be "My app name is awesome" but it won't be because dotenv doesn't perform variable expansion by itself, instead I'd have to use another library dotenv-expand to achieve this.

Also, I like using typescript and using process.env doesn't really give me any clue about my environment variables.

This approach works but has following drawbacks:

No IDE support for process.env.APP_NAME
No auto suggestion for process.env.* variables.
No Type checking is available for process.env.APP_NAME, and writing custom type is a hassle, because every time you need to add or remove an environment variables you'd have to update it's types as well.
No validation is performed on the values of these environment variables.

Typically, you should structure your .env files like the following:

.env
.env.development
.env.test
.env.production

Optionally:

.env.development.local
.env.test.local

where .env contains those environment variables that are common across all environments like:

APP_NAME
PORT
TZ etc.

And environment specific file like .env.development should contain environment specific variables like:

NODE_ENV
DATABASE_URL
SECRET etc.

The Solution

Now, to eliminate all the drawback mentioned above, like type safety, variable expansion, and validation. Follow the solution below

Now obviously we'll still be using the file structure described above to keep our environment variables split among environment specific files.

This can be achieved with dotenv-cli, a new fast-growing npm package that can be used to eliminate the need of dotenv, dotenv-expand, and our custom code for loading multiple .env.* files.

Syntax

npm i -D dotenv-cli

update your package.json file scripts to be:

"dev": "dotenv -c development -- <your command goes here ex: ts-node src/index.ts>",
"build": "tsc",
"start": "dotenv -c production -- node dist/index.js",

What we're doing in dev script is using dotenv-cli with -c flag to load:

.env
.env.development
.env.development.local (if present)

In start script we're loading:

.env
.env.production

TIP: Don't use .env.production.local file.

So, This solves our multi-environment multi-file problem, and reduced our dependency from 2 package to one, and eliminate any custom code writing for loading .env files.

Now, How can we solve our IDE support, Type checking, and validation problem.
For that we'll use envalid, a fast growing npm package to validate and provide types for our environment variables.

To get started:

npm i envalid

And yes we need it as our production dependency.

Now, we'll create a file right beside our index.ts file named env.ts, with the following content:

import { cleanEnv, str, email, json, port } from 'envalid'

// INFO: using $env to differentiate it from process.env 
export const $env = cleanEnv(process.env, {
  PORT:               port(),
  API_KEY:            str(),
  ADMIN_EMAIL:        email({ default: 'admin@example.com' }),
  EMAIL_CONFIG_JSON:  json({ desc: 'Additional email parameters' }),
  NODE_ENV:           str({ choices: ['development', 'test', 'production', 'staging']}),
})

$env.isProduction    // true if NODE_ENV === 'production'
$env.isTest          // true if NODE_ENV === 'test'
$env.isDev           // true if NODE_ENV === 'development'

And use $env instead of process.env.
By using $env we'll get:

Auto-completion ex: $env. should list all possible values in your IDE.
Type checking ex: $env.PORT will be of number type.
IDE support like: Reference count, Jump to code, show definition etc.
Validation provided by envalid, as well as custom validation logic that we can combine with envalid, to really fine tune according to our requirement.
BONUS by using env.ts file we eliminate the requirement for a .env.example file that a lot of us use to keep track of all the environment variables names that is used all across the project.

And there you have it

To learn more visit:

Feel free to comment down below, and let me know what you think.

How to add a Graphql endpoint into a Sveltekit app

vibhanshu pandey — Mon, 10 May 2021 10:46:44 +0000

Warning: The code provided in this post is not well tested for every environment, and may not provide all the features, use with caution.

Hello, In this post I will show you how you can add a graphql endpoint in a sveltekit app with apollo-server-lambda.

TLDR;

If you want to start quickly, here's the boilerplate Repo: https://github.com/vibhanshu909/sveltekit-with-graphql

Note: I'm using typescript here, if you don't use typescript, make the required changes.
This Project also uses tailwindcss, if you don't want to use tailwindcss, perform the following steps.

Delete postcss.config.cjs, tailwindcss.config.cjs & src/app.css files.

remove postcss: true option in preprocess function from svelte.config.js file.

remove import '../app.css'; statement from the script block in __layout.svelte file.

Follow the below steps.

Step 1: Install the required dependencies

npm i apollo-server-lambda graphql

Step 2: create a file `src/routes/graphql.ts` with the following contents.

import type { EndpointOutput, RequestHandler } from '@sveltejs/kit';
import { ApolloServer, gql } from 'apollo-server-lambda';

const typeDefs = gql`
    type Query {
        hello: String
    }
    type Mutation {
        double(x: Int!): Int!
    }
`;

// Provide resolver functions for your schema fields
const resolvers = {
    Query: {
        hello: () => 'Hello world!'
    },
    Mutation: {
        double: (_, { x }) => x * 2
    }
};

const apolloServer = new ApolloServer({
    typeDefs,
    resolvers,
    playground: true,
    introspection: true,
    tracing: true
});

const graphqlHandler = apolloServer.createHandler();

// This is where the magic happens.
const handler: RequestHandler = async (args) => {
    return await new Promise<EndpointOutput>((resolve, reject) => {
        graphqlHandler(
            {
                httpMethod: args.method,
                headers: args.headers,
                path: args.path,
                body: args.rawBody as string
            } as any,
            {} as any,
            (err, result) => {
                if (err) {
                    reject(err);
                } else {
                    resolve({
                        status: result.statusCode,
                        body: result.body,
                        headers: result.headers as any
                    });
                }
            }
        ) as any;
    });
};

export const head = handler;
export const get = handler;
export const post = handler;

Step 3: Test the endpoint.

npm run dev

Goto http://localhost:3000/graphql, you should see the graphql playground.

And that's it. :)

Comment down below, if you have any questions.

Auto sign-in user using saved browser credentials

vibhanshu pandey — Wed, 09 Sep 2020 15:31:31 +0000

In this post, I'll show you how you can manually prompt a user to save his credentials in the browser when a user registers, and later use it to automatically sign-in the user.

warning: At the time of writing this post, all the browser does not support the PasswordCredential Web API, you can check the supported browsers and browser versions here.

Manually storing credentials in the browser.

const PC = globalThis.PasswordCredential
export const storeCred = async (creds: {
  id: string
  password: string
}): Promise<Credential | null> => {
  // check if PasswordCredential is supported by this browser.
  if (PC) {
    const cred = new PC(creds)
    return navigator.credentials.store(cred)
  } else {
    return null
  }
}

You should call this function after the user registers, change password, and reset password to save/update the credentials in the browser. The id field represents the unique id that the user uses to sign-in, depending upon your application and your sign-in/sign-up process, it could be an email, phone number, or username.

Auto Sign-in when a user visits your site.

To auto sign-in a user, first, we have to retrieve the stored credentials from the browser, then use the credentials to call the sign-in API on the server to sign-in the user.

...
export const fetchCred = async (): Promise<Credential | null> => {
  // check if PasswordCredential is supported by this browser.
  if (PC) {
    return navigator.credentials.get({
      password: true,
    } as any)
  } else {
    return null
  }
}

Usage

...
const cred = await fetchCred()
console.log(cred) 
// { id: 'savedUserId', password: '**********'}
// call the sign-in api, with cred.
...

Prevent auto sign-in after sign-out

Once the user sign-out's itself, you don't want to auto sign-in him again, causing a lock where the user is unable to sign-out himself. This step is very important, as it allows the user to safely sign-out, sign-in with a different account, and register a new account.

export const preventSilentAccess = async (): Promise<void | null> => {
  // check if PasswordCredential is supported by this browser.
  if (PC) {
    return navigator.credentials.preventSilentAccess()
  } else {
    return null
  }
}

After calling the function on sign-out, when the user tries to sign-in, the browser will prompt the user to allow access to the credential, instead of silently providing credentials to the website.

And that's it. :)

Comment down your questions, and if you would like to see a reference implementation in React.

A curated list of all the free services in all aspects of Information Technology.

vibhanshu pandey — Sat, 01 Aug 2020 10:21:11 +0000

Hey guys whats up, today I'm gonna be sharing with you the ultimate website that contains all the free services, apis, cloud services, tools, and everything you'll ever need and so much more. I just found it out today, and can't wait to share it with you guys.

Here it is: free-for.dev

A lot of us in the IT field is in a constant hunt for free and better services & tools. We all have some great ideas, and we all love to prototype it as soon as possible, without spending a lot of money upfront, and before we can realize our idea's full potential, it may turn out to be great, or a disaster, who knows. So for all of those who are like me, and would like to try out our ideas before spending a shit load of money on it, are always in a constant hunt for free and better tools and services. So, this is like the only website you'll ever need to find the right tools and services for your next project.
It is categorically organized, provides a brief description about it, and link to find it and learn more about it,

Hope you like it. Enjoy :)

How to create a Full-Featured Modal Component in Svelte, and trap focus-within

vibhanshu pandey — Mon, 27 Jul 2020 18:18:48 +0000

Note: Although the javascript used in this tutorial is svelte specific, the idea remains the same, and can be easily applied to other frameworks and libraries, such as ReactJS. You can reuse the HTML and CSS just by copy-pasting.

pre-requisite: Before we begin, make sure you have a good-enough understanding of svelte's syntax and concepts of stores, actions, slots, and slot-props.

TL;DR
Check out the REPL here

Let's start by creating a Modal.svelte file.

<!-- if you're not using typescript, remove lang="ts" attribute from the script tag -->
<script lang="ts"></script>
<style></style>
<div></div>

Now let's add a minimal HTML and CSS required for a Modal.

<!-- if you're not using typescript, remove lang="ts" attribute from the script tag -->
<script lang="ts">
</script>

<style>
  div.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }
  div.content-wrapper {
    z-index: 10;
    max-width: 70vw;
    border-radius: 0.3rem;
    background-color: white;
    overflow: hidden;
  }
  div.content {
    max-height: 50vh;
    overflow: auto;
  }
</style>

<div class="modal">
  <div class="backdrop" />

  <div class="content-wrapper">

    <div>
      <!-- Modal header content  -->
    </div>

    <div class="content">
      <!-- content goes here -->
    </div>

    <div>
      <!-- Modal footer content  -->
    </div>

  </div>

</div>

Ok, so what do we have until now:

We have a Modal container, which is styled to be fixed and takes the full width and the full height of its document's viewport.
The Modal contains a backdrop container, which is absolutely positioned and has a background-color with opacity/alpha of 0.4 making the content behind visible.
The Modal contains a content-wrapper element for applying common styles e.g background-color, font-size, and other responsive styles.
The content-wrapper element contains 3 children for three different sections of a Modal i.e header, content, and footer(also called actions area).

SideNote: Using a separate backdrop element instead of applying the backdrop styling to the Modal element itself, allows you to have the flexibility of changing the backdrop dynamically, for example, you can pass custom styles to your backdrop without interfering with the Modal, you may style it according to different themes your website implements i.e light, dark, etc.

Now let's modify our Modal to have slots.

...
<slot name="trigger">
  <!-- fallback trigger -->
  <button>Open Modal</button>
</slot>
<div class="modal">
    <div class="backdrop" />

    <div class="content-wrapper">
      <slot name="header">
        <!-- fallback -->
        <div>
          <h1>Your Modal Heading Goes Here...</h1>
        </div>
      </slot>

      <div class="content">
        <slot name="content" />
      </div>

      <slot name="footer">
        <!-- fallback -->
        <div>
          <h1>Your Modal Footer Goes Here...</h1>
        </div>
      </slot>
    </div>
  </div>

As you can see, we have 4 slots:

trigger, for opening the Modal.
header, for containing the title of the Modal
content, for containing the body of the Modal i.e the main content.
footer, for containing action buttons like- Ok, Close, Cancel, etc.

Now let's add some state and events to our Modal to control opening/closing.

<!-- if you're not using typescript, remove lang="ts" attribute from the script tag -->
<script lang="ts">
  let isOpen = false
  function open() {
    isOpen = true
  }
  function close() {
    isOpen = false
  }
</script>

...

<slot name="trigger" {open}>
  <!-- fallback trigger to open the modal -->
  <button on:click={open}>Open</button>
</slot>

{#if isOpen}
  <div class="modal">
    <div class="backdrop" on:click={close} />

    <div class="content-wrapper">
      <slot name="header">
        <!-- fallback -->
        <div>
          <h1>Your Modal Heading Goes Here...</h1>
        </div>
      </slot>

      <div class="content">
        <slot name="content" />
      </div>

      <slot name="footer" {close}>
        <!-- fallback -->
        <div>
          <h1>Your Modal Footer Goes Here...</h1>
          <button on:click={close}>close</button>
        </div>
      </slot>
    </div>
  </div>
{/if}

Usage

Now, this is a working Modal, all you need to do is render it with some content e.g:

<script lang="ts">
  import Modal from './components/Modal.svelte'
</script>

  <Modal>
    <div slot="content">
      <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, magni earum ut ex
              totam corporis unde incidunt deserunt, dolorem voluptatum libero quia. Maiores,
              provident error vel veritatis itaque nemo commodi.
      </p>
    </div>
  </Modal>

Now let's add the keydown listener to close Modal when the user press' es the Escape key, let's try doing it the obvious way which is less friendly and understand it's caveats, then we'll implement it in a more robust way.

<script lang="ts">
  ...
  function keydown(e: KeyboardEvent) {
    e.stopPropagation()
    if (e.key === 'Escape') {
      close()
    }
  }
</script>

...

{#if isOpen}
  <!-- tabindex is required, because it tells the browser that this div element is focusable and hence triggers the keydown event -->
  <div class="modal" on:keydown={keydown} tabindex={0} autofocus>
    ...
  </div>
{/if}

You'll notice that when you open the Modal, and tab around, and you happen to move your focus outside the Modal, pressing Escape key is not closing the Modal. Here's the fix.

Suggested Read: how to trap focus.

Using the same approach illustrated in the above article, let's implement the same in our Modal. But first, let's move our local state and functions to a svelte store.

// store/booleanStore.ts
import { writable } from 'svelte/store'

export function booleanStore(initial: boolean) {
  const isOpen = writable<boolean>(initial)
  const { set, update } = isOpen
  return {
    isOpen,
    open: () => set(true),
    close: () => set(false),
    toggle: () => update((n) => !n),
  }
}

Trapping focus within our Modal

Here is the complete implementation of our full-featured Modal, which is responsive((ish), there's room for further improvement), properly handles the opening and closing of multiple Modals, handles keydown listeners, accessible(follows accessibility guidelines(could be further improved)) and traps focus within the top-most opened Modal.

<!-- if you're not using typescript, remove lang="ts" attribute from the script tag -->
<script context="module" lang="ts">
  // for passing focus on to the next Modal in the queue.
  // A module context level object is shared among all its component instances. [Read More Here](https://svelte.dev/tutorial/sharing-code)
  const modalList: HTMLElement[] = []
</script>

<script lang="ts">
  import { booleanStore } from '../stores/booleanStore'

  const store = booleanStore(false)
  const { isOpen, open, close } = store
  function keydown(e: KeyboardEvent) {
    e.stopPropagation()
    if (e.key === 'Escape') {
      close()
    }
  }
  function transitionend(e: TransitionEvent) {
    const node = e.target as HTMLElement
    node.focus()
  }
  function modalAction(node: HTMLElement) {
    const returnFn = []
    // for accessibility
    if (document.body.style.overflow !== 'hidden') {
      const original = document.body.style.overflow
      document.body.style.overflow = 'hidden'
      returnFn.push(() => {
        document.body.style.overflow = original
      })
    }
    node.addEventListener('keydown', keydown)
    node.addEventListener('transitionend', transitionend)
    node.focus()
    modalList.push(node)
    returnFn.push(() => {
      node.removeEventListener('keydown', keydown)
      node.removeEventListener('transitionend', transitionend)
      modalList.pop()
      // Optional chaining to guard against empty array.
      modalList[modalList.length - 1]?.focus()
    })
    return {
      destroy: () => returnFn.forEach((fn) => fn()),
    }
  }
</script>

<style>
  div.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
  }
  div.modal:not(:focus-within) {
    transition: opacity 0.1ms;
    opacity: 0.99;
  }
  div.backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    width: 100%;
    height: 100%;
  }
  div.content-wrapper {
    z-index: 10;
    max-width: 70vw;
    border-radius: 0.3rem;
    background-color: white;
    overflow: hidden;
  }
  @media (max-width: 767px) {
    div.content-wrapper {
      max-width: 100vw;
    }
  }
  div.content {
    max-height: 50vh;
    overflow: auto;
  }
  h1 {
    opacity: 0.5;
  }
</style>

<slot name="trigger" {open}>
  <!-- fallback trigger to open the modal -->
  <button on:click={open}>Open</button>
</slot>
{#if $isOpen}
  <div class="modal" use:modalAction tabindex="0">
    <div class="backdrop" on:click={close} />

    <div class="content-wrapper">
      <slot name="header" {store}>
        <!-- fallback -->
        <div>
          <h1>Your Modal Heading Goes Here...</h1>
        </div>
      </slot>

      <div class="content">
        <slot name="content" {store} />
      </div>

      <slot name="footer" {store}>
        <!-- fallback -->
        <div>
          <h1>Your Modal Footer Goes Here...</h1>
          <button on:click={close}>Close</button>
        </div>
      </slot>
    </div>

  </div>
{/if}

Usage

<script lang="ts">
  import Modal from './components/Modal.svelte'
</script>
<Modal>
  <div slot="trigger" let:open>
    <Button on:click={open}>Open Modal</Button>
  </div>
  <div slot="header">
    <h1>First Modal</h1>
  </div>
  <div slot="content">
    <!-- Modal within a Modal -->
    <Modal>
      <div slot="trigger" let:open>
        <Button on:click={open}>Open Second Modal</Button>
      </div>
      <div slot="header">
        <h1>Second Modal</h1>
      </div>
      <div slot="content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, magni earum ut ex
            totam corporis unde incidunt deserunt, dolorem voluptatum libero quia. Maiores,
            provident error vel veritatis itaque nemo commodi.
          </p>
      </div>
    </Modal>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, magni earum ut ex
        totam corporis unde incidunt deserunt, dolorem voluptatum libero quia. Maiores, provident
        error vel veritatis itaque nemo commodi.
      </p>
  </div>

  <div slot="footer" let:store={{close}}>
    <button on:click={close}>Close First Modal</button>
  </div>
</Modal>

You can see the beauty of slot and slot-props and how it takes component composition to the next level.

Note: For my fellow developers who are more comfortable with javascript, can simply strip out all the typescript's type annotations in front for variables, and it should be good to go.

Hope you enjoyed it, feel free to comment down below if you have any questions or suggestions. :)

How to use react-dropzone with react-hook-form

vibhanshu pandey — Sat, 13 Jun 2020 15:47:19 +0000

Hello guys, today we are going to learn how we can use react-dropzone with react-hook-form (a hook based React library for building forms) for handling file input, so let's get started.

Note: I'm using tailwindcss so you may ignore all the class names you see in this tutorial and use you own.

Now before we begin, make sure you've installed both the required dependencies.

Step 1) Create a custom FileInput Component.



// components/FormComponents/FileInput.tsx
import React, { FC, useCallback, useEffect } from 'react'
import { DropzoneOptions, useDropzone } from 'react-dropzone'
import { useFormContext } from 'react-hook-form'

interface IFileInputProps
  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
  label?: string
}

const FileInput: FC<IFileInputProps> = (props) => {
  const { name, label = name } = props
  const {
    register,
    unregister,
    setValue,
    watch,
  } = useFormContext()
  const files: File[] = watch(name)
  const onDrop = useCallback<DropzoneOptions['onDrop']>(
    (droppedFiles) => {
      setValue(name, droppedFiles, { shouldValidate: true })
    },
    [setValue, name],
  )
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: props.accept,
  })
  useEffect(() => {
    register(name)
    return () => {
      unregister(name)
    }
  }, [register, unregister, name])
  return (
    <>
      <label
        className='block text-gray-700 text-sm font-bold mb-2 capitalize'
        htmlFor={name}
      >
        {label}
      </label>
      <div {...getRootProps()}>
        <input
          {...props}
          className='shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'
          id={name}
          {...getInputProps()}
        />
        <div
          className={
            'w-full p-2 border border-dashed border-gray-900 ' +
            (isDragActive ? 'bg-gray-400' : 'bg-gray-200')
          }
        >
          <p className='text-center my-2'>Drop the files here ...</p>
          {/* Optionally you may display a preview of the file(s) */}
          {!!files?.length && (
            <div className='grid gap-1 grid-cols-4 mt-2'>
              {files.map((file) => {
                return (
                  <div key={file.name}>
                    <img
                      src={URL.createObjectURL(file)}
                      alt={file.name}
                      style={{ width: '100px', height: '100px' }}
                    />
                  </div>
                )
              })}
            </div>
          )}
        </div>
      </div>
    </>
  )
}

export default FileInput

Note: This is just an example to illustrate the concept, hence I've skipped error handling, and validations, but you may do as you see fit.

Step 2) Using this component in a form.



// components/Forms/ProductForm.tsx
import React from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import Input from 'components/FormComponents/Input'
import FileInput from 'components/FormComponents/FileInput'

export const ProductForm: React.FC = () => {
  const methods = useForm({
    mode: 'onBlur',
  })
  const onSubmit = methods.handleSubmit((values) => {
    console.log('values', values)
    // Implement your own form submission logic here.
  })

  return (
      <FormProvider {...methods}>
        <form onSubmit={onSubmit}>
            <div className='mb-4'>
              <Input name='name' />
            </div>
            <div className='mb-4'>
              <Input name='description' />
            </div>
            <div className='mb-4'>
              <Input name='price' type='number' />
            </div>
            <div className='mb-4'>
              <Input name='discount' type='number' />
            </div>
            <div className='mb-4'>
              <FileInput
                accept='image/png, image/jpg, image/jpeg, image/gif'
                multiple
                name='images'
              />
            </div>
            <div className='mb-4'>
              <button className='w-full bg-primary'>
                Create
              </button>
            </div>
        </form>
      </FormProvider>
  )
}

And here is the Input Component used above, just in case you want to take a sneak peek.



// components/FormComponents/Input.tsx
import React from 'react'
import { useFormContext, ValidationRules, FieldError } from 'react-hook-form'
import { DeepMap } from 'react-hook-form/dist/types/utils'
import { FaInfoCircle } from 'react-icons/fa'

export const get = (errors: DeepMap<Record<string, any>, FieldError>, name: string): FieldError => {
  const result = name.split('.').reduce((prev, cur) => prev?.[cur], errors)
  return result
}

export interface IInputProps
  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
  label?: string
  validate?: ValidationRules
}

const Input: React.FC<IInputProps> = (props) => {
  const { name, label = name, validate } = props
  const { errors, register } = useFormContext()
  const errorMessage = get(errors, name)?.message
  const ref = register(validate)
  return (
      <div>
        <label
          className={`block ${
            errorMessage ? 'text-red-600' : 'text-gray-700'
          } text-sm font-bold mb-2 capitalize`}
          htmlFor={name}
        >
          {label}
        </label>
        <input
          {...props}
          className={`shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none ${
              errorMessage ? 'border-red-600 focus:shadow-red bg-red-200' : 'focus:shadow-outline'
            }`}
          id={name}
          ref={ref}
        />
       {errorMessage && (
          <p className='mt-2 text-red-600 font-medium text-xs italic'>
            <FaInfoCircle className='mr-1' /> {errorMessage}
          </p>
      )}
      </div>
  )
}

export default Input

And You're Done

Now you can drag-n-drop your images into the dropzone container, or click the container to select images from the file chooser. And that's it, for the most part, Enjoy.

Bonus Tip- for image and media-centric web applications.

Now let's take a look at what's happening in the above GIF.

Initially, we see an empty box.
The user drags n drop 3 image files, which is immediately displayed inside the box.
The user again drops 1 more image file in the box, which is again immediately displayed inside the box.
And lastly, the user again drops the same 1 image file which he did in the previous step, and nothing happens.

Now there are 2 things to notice here:-

Dropping files the second time preserves existing ones along with new file(s), which is not the default behaviour of <input type='file' /> or react-dropzone.
Dropping a file that already exists does not affect as it automatically gets filtered out as a duplicate.

Let's see how we can incorporate these feature in the FileInput component



// components/FormComponents/FileInput.tsx
import React, { FC, useCallback, useEffect } from 'react'
import { DropzoneOptions, useDropzone } from 'react-dropzone'
import { useFormContext } from 'react-hook-form'

interface IFileInputProps
  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
  label?: string
  mode?: 'update' | 'append'
}

const FileInput: FC<IFileInputProps> = (props) => {
  const { name, label = name, mode = 'update' } = props
  const {
    register,
    unregister,
    setValue,
    watch,
  } = useFormContext()
  const files: File[] = watch(name)
  const onDrop = useCallback<DropzoneOptions['onDrop']>(
    (droppedFiles) => {
      /*
         This is where the magic is happening.
         Depending upon the mode we are replacing old files with new one,
         or appending new files into the old ones, and also filtering out the duplicate files. 
      */
      let newFiles = mode === 'update' ? droppedFiles : [...(files || []), ...droppedFiles]
      if (mode === 'append') {
        newFiles = newFiles.reduce((prev, file) => {
          const fo = Object.entries(file)
          if (
            prev.find((e: File) => {
              const eo = Object.entries(e)
              return eo.every(
                ([key, value], index) => key === fo[index][0] && value === fo[index][1],
              )
            })
          ) {
            return prev
          } else {
            return [...prev, file]
          }
        }, [])
      }
      // End Magic.
      setValue(name, newFiles, { shouldValidate: true })
    },
    [setValue, name, mode, files],
  )
  // ---- no changes here, same code as above ----
}

export default FileInput

Usage of append mode



<FileInput
  accept='image/png, image/jpg, image/jpeg, image/gif'
  multiple
  name='images'
  mode='append'
/>

And that's it you're ready to go.... enjoy.

Comment Down below, which one of you would like to see the file removal feature, and I'm might make an additional post with this one about how you can provide an option where the user can remove one or more of the selected files/images while keeping the others. :)

Click outside listener for React components in 10 lines of code [Using Hooks]

vibhanshu pandey — Thu, 16 Apr 2020 14:57:12 +0000

prerequisite: Please read my previous post to get an understanding of how one can implement a click outside listener in React in the first place, once you have an idea, this tutorial will become a lot simpler.

In the previous post, we learned how to implement a click outside listener without using any third-party libraries within just 10 lines of code.

In this tutorial, we will take a step further, and implement the same concept using our own custom hook, so let's begin.

Here's the hook:

// hooks/useClickOutsideListenerRef.tsx
import { useCallback, useEffect, useRef } from 'react'

export const useClickOutsideListenerRef = (onClose: () => void) => {
  const ref = useRef(null)
  const escapeListener = useCallback((e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      onClose()
    }
  }, [])
  const clickListener = useCallback(
    (e: MouseEvent) => {
      if (!(ref.current! as any).contains(e.target)) {
        onClose?.()
      }
    },
    [ref.current],
  )
  useEffect(() => {
    document.addEventListener('click', clickListener)
    document.addEventListener('keyup', escapeListener)
    return () => {
      document.removeEventListener('click', clickListener)
      document.removeEventListener('keyup', escapeListener)
    }
  }, [])
  return ref
}

Usage Example:

// components/Dialog.tsx
import React from 'react'
import { useClickOutsideListenerRef } from '../hooks/useClickoutsideListenerRef'

export interface IDialogProps {
  onClose: () => void
}

export const Dialog: React.FC<IDialogProps> = props => {
  const { onClose, children } = props
  const ref = useClickOutsideListenerRef(onClose)
  // I'm using tailwindcss for my css, you can use whatever you want.
  return (
    <div className='w-screen h-screen fixed inset-0 z-50 dialog-container'>
      <div className='flex h-full'>
        <div
          ref={ref}
          className='bg-white p-3 md:w-1/3 max-w-3/4 rounded overflow-auto'
        >
          {children}
        </div>
      </div>

      <style jsx={true}>{`
        .dialog-container {
          background-color: rgba(0, 0, 0, 0.25);
        }
      `}</style>
    </div>
  )
}

Explanation

The useClickOutsideListenerRef hook takes a function which is invoked when the user clicks outside your component, and returns a ref which you need to refer to your Content Element, meaning the element that you want to interact with, i.e in this example the actual dialog box. So basically whenever the user click's outside the refered div element, the onClose method is invoked and the dialog is closed, but when the user click's inside the refered div the dialog remains open and stays interactive.

Enjoy.

Click outside listener for React components in 10 lines of code

vibhanshu pandey — Mon, 06 Jan 2020 12:39:01 +0000

In this tutorial, you will learn how to create a component that is able to listen on click events outside itself and also BONUS: how to listen for escape keypress.

So you want to listen for click event when the user clicks outside your component. Instead of installing an npm package specifically for it, why not implement it yourself, it'll take less than 10 lines of code.

Let's begin

The first thing you need to know is that you can attach and detach click listeners on the document object itself.

For example:

const clickListener = () => console.log('document clicked');
// Attach a click listener on the document.
document.addEventListener('click', clickListener);

// Detach the click listener on the document.
document.removeEventListener('click', clickListener);

Remember to use a named function or referenced function, like the one used above, not an anonymous arrow function. For example, this will not work:

// Attach a click listener on the document.
document.addEventListener('click', () => console.log('document clicked'));

// Detach the click listener on the document.
document.removeEventListener('click', () => console.log('document clicked'));

Now that we know we can add event listeners on the document object how can we utilize this feature to our advantage?

So Let's start by creating a EnhancedMenu Component that will display a menu when opened and automatically closes itself when clicked outside.

import React, { useState } from 'react'
import { Content } from './Content'

export const EnhancedMenu: React.FC = ({ children }) => {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button
        onClick={() => {
          setOpen(true)
        }}
      >
        Open Menu
      </button>
      {open && (
        <Content
          onClose={() => {
            setOpen(false)
          }}
        >
          {children}
        </Content>
      )}
    </>
  )
}

Now let's take a Look at our Content Component.

import React, { useCallback, useEffect, useRef } from 'react'

export const Content: React.FC<{ onClose: any }> = ({ onClose, children }) => {
  const ref = useRef(null)
  const escapeListener = useCallback((e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      onClose()
    }
  }, [])
  const clickListener = useCallback(
    (e: MouseEvent) => {
      if (!(ref.current! as any).contains(e.target)) {
        onClose?.() // using optional chaining here, change to onClose && onClose(), if required
      }
    },
    [ref.current],
  )
  // Below is the 10 lines of code you need.
  useEffect(() => {
    // Attach the listeners on component mount.
    document.addEventListener('click', clickListener)
    document.addEventListener('keyup', escapeListener)
    // Detach the listeners on component unmount.
    return () => {
      document.removeEventListener('click', clickListener)
      document.removeEventListener('keyup', escapeListener)
    }
  }, [])
  return (
    <div
      ref={ref}
    >
      {children}
    </div>
  )
}

And That it now click on the EnhancedMenu button and the Content Component will render and attach the click listener on the document object, and when the Content component is unmounted the listener is detached.

One important step to mention is the use of ref in the Content Component. As you may know that Dom events are Propagated upwards in the tree, so to prevent the click event on the Content component itself to close the EnhancedMenu, we check the element that generated that ClickEvent, and if it is not from within the Content component only then we execute the onClose function. see below:

const clickListener = useCallback(
  (e: MouseEvent) => {
    if (!(ref.current! as any).contains(e.target)) {
      onClose?.()
    }
  },
  [ref.current],
)

And that's it, you now have a full function Content Component that you may use anywhere, where you need a click outside listener, or close something when escape key is pressed.

Enjoy.

DEV Community: vibhanshu pandey

You Probably Don't Need Redis for Distributed Locking

Introduction

Problem statement

Available solutions

Pros and cons: Postgres advisory locks vs Redis locks

Code example: PostgreSQL advisory lock (Spring Boot)

Code example: Redis lock (SET NX EX + token + Lua release + renewal + SCAN)

Security considerations

Behaviour with read replicas (Postgres)

Summary

Bulletproof Your Node.js Backend: Manage Environment Variables with Confidence

Pretext

The Problem

The Solution

Syntax

And there you have it

How to add a Graphql endpoint into a Sveltekit app

TLDR;

Follow the below steps.

Step 1: Install the required dependencies

Step 2: create a file src/routes/graphql.ts with the following contents.

Step 3: Test the endpoint.

Auto sign-in user using saved browser credentials

Manually storing credentials in the browser.

Auto Sign-in when a user visits your site.

Usage

Prevent auto sign-in after sign-out

A curated list of all the free services in all aspects of Information Technology.

Here it is: free-for.dev

How to create a Full-Featured Modal Component in Svelte, and trap focus-within

Now let's add a minimal HTML and CSS required for a Modal.

Ok, so what do we have until now:

Now let's modify our Modal to have slots.

As you can see, we have 4 slots:

Now let's add some state and events to our Modal to control opening/closing.

Usage

Trapping focus within our Modal

Usage

How to use react-dropzone with react-hook-form

Step 1) Create a custom FileInput Component.

Step 2) Using this component in a form.

And You're Done

Bonus Tip- for image and media-centric web applications.

Now let's take a look at what's happening in the above GIF.

Let's see how we can incorporate these feature in the FileInput component

Usage of append mode

Click outside listener for React components in 10 lines of code [Using Hooks]

Here's the hook:

Usage Example:

Explanation

Click outside listener for React components in 10 lines of code

Let's begin

Step 2: create a file `src/routes/graphql.ts` with the following contents.