PD
🧩 Plasmo Developers•2y ago
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
}
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!
4 Replies
SĂ©bastien
SébastienOP•2y ago
@louis
SĂ©bastien
SébastienOP•2y ago
@louis
Arcane
Arcane•2y ago
@tetec1 has reached level 5. GG!
SĂ©bastien
SébastienOP•2y ago
okay, I think I figured it out, for some reason pnpm didn't install the correct version of the package, and putting it in the devDependencies in my package.json didn't work. so yes, ""@plasmohq/storage" must be in the dependencies, not the devDependencies.

Did you find this page helpful?