serkan Comments - Answer Overflow

serkan

•Created by Augustos on 8/24/2023 in #front-end

Why should i not use `()=> {}` on components elements like `onChange` or `onClick` in React?

I think it's not a bad thing if your component is not crowded, but when it gets bigger you need to seperate things to get a better look

11 replies

KPCKevin Powell - Community

•Created by serkan on 8/22/2023 in #front-end

How did I create this cool effect? | Video and the code is in the comments

3 replies

KPCKevin Powell - Community

•Created by serkan on 8/22/2023 in #front-end

How did I create this cool effect? | Video and the code is in the comments

import React, { useState } from "react";

function QuestionMark() {
  const [visibility, setVisibility] = useState(false);

  // https://www.youtube.com/watch?v=B_n4YONte5A
  const styles = {
    display: "grid",
    gridTemplateRows: visibility ? "1fr" : "0fr",
    padding: visibility ? "1rem" : "0",
  };

  const triggerMessageBox = (e) => {
    setVisibility((prevValue) => {
      return !prevValue;
    });
    e.preventDefault();
  };

  return (
    <div>
      <div
        className="absolute z-[1] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 bg-black rounded-lg transition-all duration-500"
        style={styles}
      >
        <div className="overflow-hidden">
          <button
            onClick={triggerMessageBox}
            className="px-1 text-white block text-2xl font-extrabold ml-auto"
          >
            𝕏
          </button>
          <p className="text-white pt-4">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
            quaerat amet quos odio modi quae est, totam, natus dolor et
            accusamus optio quisquam vel velit ipsa dolorem illo blanditiis
            ducimus. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Repellat necessitatibus, magni molestiae maiores nam vel expedita
          </p>
        </div>
      </div>
      <button
        onClick={triggerMessageBox}
        className="absolute right-4 bottom-24 z-50 mt-auto w-10 h-10 border-2 text-white font-extrabold text-3xl flex items-center justify-center"
      >
        ?
      </button>
    </div>
  );
}

export default QuestionMark;

import React, { useState } from "react";

function QuestionMark() {
  const [visibility, setVisibility] = useState(false);

  // https://www.youtube.com/watch?v=B_n4YONte5A
  const styles = {
    display: "grid",
    gridTemplateRows: visibility ? "1fr" : "0fr",
    padding: visibility ? "1rem" : "0",
  };

  const triggerMessageBox = (e) => {
    setVisibility((prevValue) => {
      return !prevValue;
    });
    e.preventDefault();
  };

  return (
    <div>
      <div
        className="absolute z-[1] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 bg-black rounded-lg transition-all duration-500"
        style={styles}
      >
        <div className="overflow-hidden">
          <button
            onClick={triggerMessageBox}
            className="px-1 text-white block text-2xl font-extrabold ml-auto"
          >
            𝕏
          </button>
          <p className="text-white pt-4">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
            quaerat amet quos odio modi quae est, totam, natus dolor et
            accusamus optio quisquam vel velit ipsa dolorem illo blanditiis
            ducimus. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Repellat necessitatibus, magni molestiae maiores nam vel expedita
          </p>
        </div>
      </div>
      <button
        onClick={triggerMessageBox}
        className="absolute right-4 bottom-24 z-50 mt-auto w-10 h-10 border-2 text-white font-extrabold text-3xl flex items-center justify-center"
      >
        ?
      </button>
    </div>
  );
}

export default QuestionMark;

3 replies

KPCKevin Powell - Community

•Created by wmh_ on 8/16/2023 in #front-end

OTP auto foucs (React js)

the code from the updated version is working, https://stackoverflow.com/a/54225169

5 replies

KPCKevin Powell - Community

•Created by serkan on 7/12/2023 in #front-end

How big should the image sizes be?

Thanks everyone, converting image to webp decreased the size of images really well and I used preload to assure my main image is loaded very fast.

5 replies

KPCKevin Powell - Community