Create React project with Vite

PHOTO

Mon Aug 08 2022 04:21:51 GMT+0000 (Coordinated Universal Time)

Saved by @HiTsH987 #react.js #vite.js #npm

npm create vite@latest 
cd <project name>
npm install
npm run dev

COPY

Save snippets that work from anywhere online with our extensions

Comments

commend lines

@HiTsH987

Create React project with Vite Create react project with (create-react-app) Generate Random Base64 Data with OpenSSL

#react.js #redux

Check if token expires and logout user

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

##javascript ##js #next.js #react.js

Animate header on scroll with Next.js & TailwindCSS

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

#css #react.js

React Color Gradients

https://codepen.io/marcobiedermann/pen/WNGWzYR

#react.js #javascript #checkboxtoggle

javascript - How to toggle boolean state of react component? - Stack Overflow

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

#javascript #react.js

lowercase, uppercase, remove spaces ( trim ) , capitalize first letter

// making all uppercase
city.toUpperCase();

//removing spaces and making all lowercase
city = city.trim().toLowerCase();

//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);

#react.js

Open new window onclick reactJS

onClick={() => window.open(url, "_blank")}

#react.js

Определяет клик вне компонента

import { useEffect } from 'react';

export const useClickOutside = (ref, setIsModalOpen) => {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsModalOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
};

#npm

Finds all npm links

npm ls -g --depth=0 --link=true

#javascript #nodejs #nvm #npm

Update to latest version of Nodejs with nvm

//To see all versions of Node that are installed on your machine use the command:
$ npm -v

//To see versions installed on machine

$ nvm ls
->      v16.1.0
         system
default -> node (-> v16.1.0)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.1.0) (default)
stable -> 16.1 (-> v16.1.0) (default)

// add a new version
$ nvm install <version>
  
// to switch to a different verison
  
$ nvm use <version>

#wordpress #gutenberg #git #npm

NPM Create Block

$ npx @wordpress/create-block [options] [slug]

#react.js #vite.js #npm

Create React project with Vite

npm create vite@latest 
cd <project name>
npm install
npm run dev

#react.js #npm #create-react-app

Create react project with (create-react-app)

npx create-react-app my_app
cd my_app
npm start

#javascript #npm #node

List all npm packages of global

npm list -g --depth=0

#npm #node #commit #dependancies

Commitizen install

pip install --user -U Commitizen

#nodejs #commit #commitizen #npm

Configuration - Commitizen

{
  "commitizen": {
    "name": "cz_conventional_commits",
    "version": "0.1.0",
    "version_files": ["src/__version__.py", "pyproject.toml:version"],
    "style": [
      ["qmark", "fg:#ff9d00 bold"],
      ["question", "bold"],
      ["answer", "fg:#ff9d00 bold"],
      ["pointer", "fg:#ff9d00 bold"],
      ["highlighted", "fg:#ff9d00 bold"],
      ["selected", "fg:#cc5454"],
      ["separator", "fg:#cc5454"],
      ["instruction", ""],
      ["text", ""],
      ["disabled", "fg:#858585 italic"]
    ]
  }
}

Create React project with Vite

Save snippets that work from anywhere online with our extensions

Comments

More like this

commend lines

Browse more snippets >>

Create React project with Vite

Save snippets that work from anywhere online with our extensions

Comments

More like this

commend lines

Browse more snippets >>

Embed code snippet