jakeman
jakeman
PostsComments
TTCTheo's Typesafe Cult
Created by jakeman on 4/10/2023 in #questions
Figma Icons to React Components
For anyone who needs something similar https://github.com/JakeSchroeder/svg2jsx-cli
18 replies
TTCTheo's Typesafe Cult
Created by jakeman on 4/10/2023 in #questions
Figma Icons to React Components
For anyone in the future reading this: I decided to export all svgs from figma to desktop folder and then just build a simple script using https://github.com/balajmarius/svg2jsx/tree/master/packages/transform this and then adding my own custom config to use the svg file name input as the react component name.
18 replies
TTCTheo's Typesafe Cult
Created by jakeman on 4/10/2023 in #questions
Figma Icons to React Components
😜
18 replies
TTCTheo's Typesafe Cult
Created by jakeman on 4/10/2023 in #questions
Figma Icons to React Components
'Sad face' (time to waste my entire day off going down a figma plugin rabbit hole?)
18 replies
TTCTheo's Typesafe Cult
Created by jakeman on 4/10/2023 in #questions
Figma Icons to React Components
I been using this https://svg2jsx.com/ I just really hate having to manually do this because im early in a design system and a lot could change in the future 100s of icons 🥴
18 replies
TTCTheo's Typesafe Cult
Created by jakeman on 4/10/2023 in #questions
Figma Icons to React Components
I need control over styling, size, etc.
18 replies
TTCTheo's Typesafe Cult
Created by jakeman on 2/19/2023 in #questions
Single nested admin route catch-all for all pages?
Edit: maybe its just a catch all route? pages index.js about.js contact.js [...admin].js
2 replies
TTCTheo's Typesafe Cult
Created by jakeman on 2/11/2023 in #questions
Why does react rerender this at the component level but not when using a hook?
Yeah makes sense. Thanks for the help dude
21 replies
TTCTheo's Typesafe Cult
Created by jakeman on 2/11/2023 in #questions
Why does react rerender this at the component level but not when using a hook?
Than how do you clear the interval?
21 replies
TTCTheo's Typesafe Cult
Created by jakeman on 2/11/2023 in #questions
Why does react rerender this at the component level but not when using a hook?
No doubt the most error prone aspect of react (atleast that I run into)
21 replies
TTCTheo's Typesafe Cult
Created by jakeman on 2/11/2023 in #questions
Why does react rerender this at the component level but not when using a hook?
Still confused hahha
21 replies
TTCTheo's Typesafe Cult
Created by jakeman on 2/11/2023 in #questions
Why does react rerender this at the component level but not when using a hook?
the line that fixes it is let newText = text[index.current];
21 replies
TTCTheo's Typesafe Cult
Created by jakeman on 2/11/2023 in #questions
Why does react rerender this at the component level but not when using a hook?
After more testing this works: 
export const WithoutHook = () => {
  const [typingText, setTypingText] = useState("");
  const text = "hello";
  const index = useRef(0);
  
  useEffect( () => {
    const interval = setInterval(() => {
      if (index.current < text.length) {
          let newText = text[index.current];
         setTypingText((prevMessage) => prevMessage + newText);
      } else {
        clearInterval(interval);
      }
      index.current++;
    }, 500);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>{typingText}</h1>
    </div>
  );
};
export const WithoutHook = () => {
  const [typingText, setTypingText] = useState("");
  const text = "hello";
  const index = useRef(0);
  
  useEffect( () => {
    const interval = setInterval(() => {
      if (index.current < text.length) {
          let newText = text[index.current];
         setTypingText((prevMessage) => prevMessage + newText);
      } else {
        clearInterval(interval);
      }
      index.current++;
    }, 500);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h1>{typingText}</h1>
    </div>
  );
};
21 replies
TTCTheo's Typesafe Cult
Created by jakeman on 2/11/2023 in #questions
Why does react rerender this at the component level but not when using a hook?
Or in other words do you need to await setTypingText in this case?
21 replies
TTCTheo's Typesafe Cult
Created by jakeman on 2/11/2023 in #questions
Why does react rerender this at the component level but not when using a hook?
Huh, this is really interesting. Im still confused on how changing the index from a ref to a variable inside the effect schedules it to run after setTypingText(). I remember reading somewhere that setState is async. Any concrete examples of this?
21 replies