garikaijenje

Disable HTML Form Input Autocomplete and Autofill

1. Add autocomplete="off" onto <form> element;
2. Add hidden <input> with autocomplete="false" as a first children element of the form.

<form autocomplete="off" method="post" action="">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
    ...

garikaijenje

Run the code in the target directory

curl -o f.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto?download=zip&subsets=latin,latin-ext&variants=regular,700" && unzip f.zip && rm f.zip

garikaijenje

A custom component that checks if user is loggedIn, otherwise it redirects to the login page

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const authenticated = true; // change this to your isLoggedIn state
  return (
   <Route {...rest} render={(props) => (
      authenticated === true ?
         <Component {...props} /> : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />   
 )} /&gt;

garikaijenje

import React, { useState, useEffect } from "react";

const usePersistedState = (key, defaultValue, stringified = false) => {
  const [state, setState] = useState(
    () => (stringified ? JSON.parse(localStorage.getItem(key)) : localStorage.getItem(key) ) || defaultValue
  );
  useEffect(() => {
    localStorage.setItem(key, stringified ? JSON.stringify(state) : state);
 }, [key, state]);

garikaijenje

import axios from 'axios';

const API = axios.create({ baseURL: "YOUR_API_BASE_URL_HERE", responseType: 'json'});

const setHeaders = (token, contentType) => {
    let headers = {
        Accept: "application/json"
    }
 if (contentType) headers["Content-Type"] = contentType;

garikaijenje

Loop through multiple routes as a way to simplify your react router implementation

import React from 'react';
import { Route, Switch, useLocation } from "react-router-dom";
import ProtectedRoute from './utils/ProtectedRoute';

const About = React.lazy(() => import("./components/pages/About"))
const Contact = React.lazy(() => import("./components/pages/Contact"))
const Home = React.lazy(() => import("./components/pages/Home"))

garikaijenje

/* *******************************************************************************************
 * TAILWIND.CSS
 * DOCUMENTATION: https://tailwindcss.com/
 * ******************************************************************************************* */

/*
 * Available breakpoints
 * --------------------
 * sm: min-width: 640px;