7 replies

useStorage between two content script components in React

Hi! I’m trying to figure out how to use the useStorage hook. In one component, I do:

const SubtitlesContainer = () => {

  const [storedLanguage, setStoredLanguage] = useStorage<string>("language", "No language selected.")

  const { isSubtitlesActive, selectedSubtitlesLanguage } = useSelectedSubtitlesLanguage();
  useEffect(() => {
    console.log("selectedSubtitleLanguage changed.")
    setStoredLanguage(selectedSubtitlesLanguage);
  }, [selectedSubtitlesLanguage]);  
// rest of the component  
}

const SubtitlesContainer = () => {

  const [storedLanguage, setStoredLanguage] = useStorage<string>("language", "No language selected.")

  const { isSubtitlesActive, selectedSubtitlesLanguage } = useSelectedSubtitlesLanguage();
  useEffect(() => {
    console.log("selectedSubtitleLanguage changed.")
    setStoredLanguage(selectedSubtitlesLanguage);
  }, [selectedSubtitlesLanguage]);  
// rest of the component  
}

And in a different component, I tried doing this to log the updated value:  

function Settings() {

  const [storedLanguage] = useStorage<string>("language");
  useEffect(() => {
    if (storedLanguage !== null && typeof storedLanguage !== "undefined") {
      console.log(storedLanguage);
    }
  }, [storedLanguage]);  
// rest of the component
}

function Settings() {

  const [storedLanguage] = useStorage<string>("language");
  useEffect(() => {
    if (storedLanguage !== null && typeof storedLanguage !== "undefined") {
      console.log(storedLanguage);
    }
  }, [storedLanguage]);  
// rest of the component
}

I do get the console.log updates in the first component when my custom hook “useSelectedSubtitlesLanguage” is triggered, but in the second component the state “storedLanguage” is initially undefined, and then null.  

The two components are in separate content scripts that are injected inline.  

What I am doing wrong?  

I also cloned the -with-storage example, which does work, but I can’t figure out what I’m doing differently.  

Thank you!

�PD

🧩 Plasmo Developers•3y ago•

7 replies

Sébastien

useStorage between two content script components in React

Hi! I’m trying to figure out how to use the useStorage hook. In one component, I do:

const SubtitlesContainer = () => {

  const [storedLanguage, setStoredLanguage] = useStorage<string>("language", "No language selected.")

  const { isSubtitlesActive, selectedSubtitlesLanguage } = useSelectedSubtitlesLanguage();
  useEffect(() => {
    console.log("selectedSubtitleLanguage changed.")
    setStoredLanguage(selectedSubtitlesLanguage);
  }, [selectedSubtitlesLanguage]);  
// rest of the component  
}

const SubtitlesContainer = () => {

  const [storedLanguage, setStoredLanguage] = useStorage<string>("language", "No language selected.")

  const { isSubtitlesActive, selectedSubtitlesLanguage } = useSelectedSubtitlesLanguage();
  useEffect(() => {
    console.log("selectedSubtitleLanguage changed.")
    setStoredLanguage(selectedSubtitlesLanguage);
  }, [selectedSubtitlesLanguage]);  
// rest of the component  
}

And in a different component, I tried doing this to log the updated value:  

function Settings() {

  const [storedLanguage] = useStorage<string>("language");
  useEffect(() => {
    if (storedLanguage !== null && typeof storedLanguage !== "undefined") {
      console.log(storedLanguage);
    }
  }, [storedLanguage]);  
// rest of the component
}

function Settings() {

  const [storedLanguage] = useStorage<string>("language");
  useEffect(() => {
    if (storedLanguage !== null && typeof storedLanguage !== "undefined") {
      console.log(storedLanguage);
    }
  }, [storedLanguage]);  
// rest of the component
}

useStorage between two content script components in React

Similar Threads

useStorage between two content script components in React

Similar Threads

Similar Threads

Similar Threads