Manntrix

{
    "posts": [
      {
        "id": 1,
        "title": "Create a login form using formik in react js",
        "body": "Todays article will demonstrate how to develop a login form in react js using formik."
      },
      {
        "id": 2,
        "title": "How to parse or read CSV files in ReactJS",

Manntrix

import {useEffect, useState} from 'react'
function App() {
  const [users, setUsers] = useState([])

  //Fetching users data
  const fetchData = async() => {
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");

    var graphql = JSON.stringify({

Manntrix

{
  "**/*.{js,jsx}": ["eslint", "prettier --write"]
}

Manntrix

:root {
  --primary: #0bbdd5;
}


/* Table design */
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;

Manntrix

import "./styles.css";
import Table from "./components/Table";
import { useMemo } from "react";
import data from "./users.json";

export default function App() {
  const columns = useMemo(
    () => [
      {
        Header: "ID",

Manntrix

import { forwardRef, useEffect, useRef } from "react";
import { useTable } from "react-table";

const IndeterminateCheckbox = forwardRef(({ indeterminate, ...rest }, ref) => {
  const defaultRef = useRef();
  const resolvedRef = ref || defaultRef;

  useEffect(() => {
    resolvedRef.current.indeterminate = indeterminate;
  }, [resolvedRef, indeterminate]);

Manntrix

import "./App.css";
import { Formik } from "formik";
import * as Yup from "yup";

// Creating schema
const schema = Yup.object().shape({
  email: Yup.string()
    .required("Email is a required field")
    .email("Invalid email format"),
  password: Yup.string()

Manntrix

@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');

body {
  background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
}

.login {
  width: 360px;
  padding: 8% 0 0;
  margin: auto;

Manntrix

<div className="login">
        <div className="form">
          <form noValidate>
            <span>Login</span>

            <input
              type="email"
              name="email"
              placeholder="Enter email id / username"
              className="form-control inp_text"

Manntrix

import "../styles/globals.css";
import { useEffect } from "react";
import PathName from "../hooks/pathName";

function MyApp({ Component, pageProps }) {
  const path = PathName();
  useEffect(() => {
    document.body.className = path;
  });
  return <Component {...pageProps} />;