Snippets Collections
// App.tsx
import React, { useState } from 'react';
import './App.css';

function App() {
  const [top, setTop] = useState(0);
  const [left, setLeft] = useState(0);
  const [backgroundColor, setBackgroundColor] = useState('#ffffff')

  const keyDownHandler = (e: React.KeyboardEvent<HTMLDivElement>) => {
    const key = e.code;

    if (key === 'ArrowUp') {
      setTop((top) => top - 10);
    }

    if (key === 'ArrowDown') {
      setTop((top) => top + 10);
    }

    if (key === 'ArrowLeft') {
      setLeft((left) => left - 10);
    }

    if (key === 'ArrowRight') {
      setLeft((left) => left + 10);
    }

    if (key === 'Space') {
      let color = Math.floor(Math.random() * 0xFFFFFF).toString(16);
      for(let count = color.length; count < 6; count++) {
        color = '0' + color;                     
      }
      setBackgroundColor('#' + color);
    }
  }

  return (
    <div
      className="container"
      tabIndex={0}
      onKeyDown={keyDownHandler}
    >
      <div
        className="box"
        style={{ 
          top: top,
          left: left,
          backgroundColor: backgroundColor,
        }}></div>
    </div>
  );
}

export default App;
<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css"> <body>	<textarea class="codemirror-textarea"></textarea></body> <script> $(document).ready(function(){    var codeText = $(".codemirror-textarea")[0];    var editor = CodeMirror.fromTextArea(codeText, {        lineNumbers : true    });}); </script> <script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>
async function fun() {  return fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());} const data  = await fun();
test('render h1 element', () => {
  render(<App />);

  screen.debug();

  expect(screen.getByText('Hello World')).toBeInTheDocument();
});
const navigate = useNavigate()
navigate(-1)
// will need a HTML page with "root"

import React from "react";
import ReactDOM from "react-dom";

const date = new Date();
const currentTime = date.getHours();
const currentMins = date.getMinutes();

let greeting;

const customSyle = {
  color: ""
};

if (currentTime < 12) {
  greeting = "good morning";
  customSyle.color = "red";
} else if (currentTime < 18) {
  greeting = "good evening";
  customSyle.color = "blue";
} else {
  greeting = "good night";
  customSyle.color = "puprle";
}

ReactDOM.render(
  <h1 className="heading" style={customSyle}>
    {currentTime + ":" + currentMins + " " + greeting}
  </h1>,

  document.getElementById("root")
);
  const ref = useRef() as MutableRefObject<HTMLDivElement>;
star

Sat Jul 20 2024 14:29:46 GMT+0000 (Coordinated Universal Time) https://zenn.dev/gashi/articles/20211209-article013

#javascript #reac #type #typescript
star

Sun Oct 22 2023 15:03:34 GMT+0000 (Coordinated Universal Time)

#javascript #reac #jest
star

Sun Oct 22 2023 15:02:12 GMT+0000 (Coordinated Universal Time)

#javascript #reac #jest
star

Fri Feb 17 2023 17:15:08 GMT+0000 (Coordinated Universal Time) https://www.google.com/search?q

#javascript #reac #jest
star

Mon Apr 25 2022 08:51:25 GMT+0000 (Coordinated Universal Time)

#javascript #reac
star

Tue Sep 08 2020 15:31:13 GMT+0000 (Coordinated Universal Time)

#reac

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension