Skip to content

v1.4.0

Compare
Choose a tag to compare
@wpdas wpdas released this 21 Apr 22:31
· 56 commits to main since this release
  • Added overrideLocalStorage: This is a feature that overrides the window.localStorage with the Widget's Storage, so that, you can keep using window.localStorage but the Widget's Storage is going to be the source of data.

If using CSR:

import { overrideLocalStorage } from 'near-social-bridge/utils'

// using `sessionStorage` under the hood
overrideLocalStorage()

// The Widget won't break
localStorage.setItem('name', 'Wenderson')
localStorage.getItem('name') // "Wenderson"

If using SSR:

// Page or index.tsx
import { useEffect } from 'react'
import { NearSocialBridgeProvider, overrideLocalStorage } from 'near-social-bridge'
import MyComponent from './MyComponent'
import MyComponent2 from './MyComponent2'

overrideLocalStorage()

const SSRApp = () => {
  useEffect(() => {
    localStorage.setItem('name', 'Wenderson')
  }, [])

  return (
    <NearSocialBridgeProvider waitForStorage>
      <MyComponent />
      <MyComponent2 />
    </NearSocialBridgeProvider>
  )
}

export default SSRApp

// MyComponent
const MyComponent = () => {
  console.log(localStorage.getItem('name')) // "Wenderson"
}

// MyComponent2
import { sessionStorage } from 'near-social-bridge'
const MyComponent2 = () => {
  console.log(sessionStorage.getItem('name')) // "Wenderson"
}
  • Now it's possible to wait for storage to be hydrated before rendering the children. You just need to set NearSocialBridgeProvider.waitForStorage as true;
import { NearSocialBridgeProvider } from 'near-social-bridge'
import 'near-social-bridge/near-social-bridge.css'

const App = () => {
  return (
    <NearSocialBridgeProvider waitForStorage>
      <Components />
    </NearSocialBridgeProvider>
  )
}