useContext for img src url? [10:48am]

[frankcollins3]

attempting to do: question the img src={} handler of the app. chatGPT mentioned Typescript can add type safety while shipping this to npm

wondering whether: 👍 Keep it Sweet and Simple applies to make the better option: just using image url strings

---

👍 or is using {context} so below more enforced and restricted

import React, { createContext, useContext, ReactNode, useState } from "react";

// type the state which will be read-only 'string'
type imgContextType = {
    barrel: string;
};

// define values which will remain static
const imgDefaults: imgContextType = {
    barrel: 'img/barrel.png',
};

// createContext
const ImgContext = createContext<imgContextType>(imgDefaults);

export function useImage() {
    return useContext(ImgContext);
}

type Props = {
    children: ReactNode;
};

export function ImgProvider({ children }: Props) {    
    const [barrel, setbarrel] = useState<string>(`img/barrel.png`);

    const value = {
        barrel, 
    };

    return (
        <>
            <ImgContext.Provider value={value}>
                {children}
            </ImgContext.Provider>
        </>
    );}

proposed approach: go with typescript for now and any problems revert back to simplicity. ultimately typescript Context would depend on the same image strings that the first approach would depend on anyways

[frankcollins3]

🤖 hath spoken!

[10:58am]

[frankcollins3]

bookmark: // first planned on no directory for Contexts, just a .tsx file in the main root as below: main-root/Img.tsx

now adding Contexts directory because as the parent wrapper will determine different style of captcha down the road .tsx files should separate the different types of images. I was going to name img-src-variables with gold to indicate this style for mine-nugget-ts.