Author: Rohit Adithiya

This topic explores how to create SEO-optimized pages in Next.js using content fetched from Payload CMS. React Example: Dynamic Meta Tags with React Helmet import React from ‘react’; import { Helmet } from ‘react-helmet’; import axios from ‘axios’; const SEOPage = ({ pageId }) => {   const [seoData, setSeoData] = useState({});   useEffect(() =>… Continue reading Implementing SEO-Friendly Pages in Next.js with Payload CMS

This topic demonstrates how to create dynamic forms in React that are generated based on schema data stored in Payload CMS. Payload CMS Example: Custom Form Field Configuration module.exports = {   slug: ‘forms’,   fields: [     {       name: ‘fields’,       type: ‘array’,       fields: [… Continue reading Building Dynamic Forms with Payload CMS and React

This topic covers how to set up and integrate user authentication in a React or Next.js application using Payload CMS. It also includes managing user roles and permissions. React Example: Login Form Integration import React, { useState } from ‘react’; import axios from ‘axios’; const LoginForm = () => {   const [email, setEmail] =… Continue reading User Authentication and Authorization in Payload CMS

Pagination All collection find queries are paginated automatically. Responses are returned with top-level meta data related to pagination, and returned documents are nested within a docs array. Find response properties: PropertyDescriptiondocsArray of documents in the collectiontotalDocsTotal available documents within the collectionlimitLimit query parameter – defaults to 10totalPagesTotal pages available, based upon the limit queried forpageCurrent page numberpagingCounternumber of the first doc on the current… Continue reading Pagination Queers in the payload CMS

Forgot Password: You can customize how the Forgot Password workflow operates with the following options on the auth.forgotPassword property: generateEmailHTML Function that accepts one argument, containing { req, token, user }, that allows for overriding the HTML within emails that are sent to users attempting to reset their password. The function should return a string that supports HTML,… Continue reading How to create a customized Email template using Payload CMS

Using the below code we re fetch the values from child to parent without refreshing we can call the data again in the use effect import React, { useState, useEffect } from ‘react’; import Weekentry from ‘./Weekentry’; // Import your Weekentry component const ProjectTable = ({ previousWeekDates, datesArray, selectedProjects, user }) => {   const… Continue reading How to re fetch the values from child to parent using the hooks.

Using the below code, we can create a customized time picker with dropdown based on the selection import React, { useState, useEffect, useRef } from ‘react’; import ReactDOM from ‘react-dom’; import ‘./CustomTimePicker.css’; // Import custom CSS for styling interface CustomTimePickerProps {   value: number;   onChange: (value: number) => void;   disabled: boolean; } const… Continue reading How to create a customized hours and minutes picker using the react.js