Bonny-kato

Access Control in React Based Apps

Following user authentication, implementing access control in a React app involves managing and restricting user permissions to access certain components or pages based on their roles, attributes, and permissions. This ensures that users can only access resources they're authorized to handle or perform actions permitted for them. Two common types of access control are RBAC (Role-Based Access Control) and ABAC (Attribute-Based Access Control).

Introduction

Role-Based Access Control (RBAC)

Bonny-kato

HeadlessDatePicker Component with Month Navigation

Preview:

import * as dayjs from "dayjs";
import { Dayjs } from "dayjs";
import { useEffect, useState } from "react";

export const getMonth = (month = dayjs().month()) => {
    const year = dayjs().year();
    const firstDayOfMonth = dayjs(new Date(year, month, 1)).day();

Bonny-kato

React Hook for Tracking User Inactivity

Preview:

import {
    getValueFromLocalStorage,
    localStorageKeys,
    removeValuesFromLocalStorage,
    saveValueToLocalStorage,
} from "@/utils/local-storage";
import { TFunction } from "@/types";

Bonny-kato

Generate Query Parameters from Object

Preview:

export const generateQueryParams = (params: QueryParams): string => {
    const queryParams = new URLSearchParams();

    for (const [key, value] of Object.entries(params)) {
        if (value) {
            queryParams.append(key, value.toString());
 }