v1.4.0
- Added
overrideLocalStorage
: This is a feature that overrides thewindow.localStorage
with the Widget'sStorage
, so that, you can keep usingwindow.localStorage
but the Widget'sStorage
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
astrue
;
import { NearSocialBridgeProvider } from 'near-social-bridge'
import 'near-social-bridge/near-social-bridge.css'
const App = () => {
return (
<NearSocialBridgeProvider waitForStorage>
<Components />
</NearSocialBridgeProvider>
)
}