garikaijenje / tailwind-classes-cheatsheet.md

Created April 10, 2021 19:57

A list of all the Tailwind classes

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

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

garikaijenje / react-router-refactor-multiple-routes.md

Created April 10, 2021 19:53

React Router - Refactor Multiple Routes

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(() =&gt; import("./components/pages/Home"))

garikaijenje / react-axios-all-in-one-function.md

Last active April 12, 2021 07:14

The last React API Call function you'll ever need

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 / react-persisted-state-custom-hook.md

Last active April 10, 2021 19:46

Custom react hook to persist your states

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 / react-protected-route.md

Last active April 10, 2021 19:55

React Router Protected Route Component

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 / download-google-fonts.md

Created June 26, 2020 11:27

Download fonts from Google Fonts

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 / disable-html-form-input-autocomplete-autofill.md

Last active April 8, 2021 19:22

Disable HTML Form Input Autocomplete and Autofill

Add autocomplete="off" onto <form> element;
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;">
    ...

Garikai Jenje garikaijenje

Disable HTML Form Input Autocomplete and Autofill