v1.3.0

• Support to Server-side Rendering;
• Now, it's necessary to import the near-social-bridge.css to the main application;
• Fixed an error that occurred when a new route was requested and the properties of the previous route were lost before changing the screen;
• Performance improvement;
• Auto iframe height resizer added (own solution);
• When using Navigator with autoHeightSync set as true, the height of the iframe is automatically adjusted to the initial screen content. If more content is inserted inside the screen after the first render, you can use useSyncContentHeight hook to sync the height again;
• Added useSyncContentHeight hook:

You can use this hook to do a content height sync. Thus, the height of the viewer's iframe will always have the updated height.

import { useSyncContentHeight } from 'near-social-bridge'

const MyComponent = () => {
  const { done, syncAgain } = useSyncContentHeight()
  console.log('is sync done?', done)

  const [list, setList] = useState(['a'])

  useEffect(() => {
    setList(['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'])
    syncAgain()
  }, [])

  return (
    <div className="flex flex-col">
      <p>list</p>
      {list.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </div>
  )
}

Or, you can just use useSyncContentHeight():

import { useSyncContentHeight } from 'near-social-bridge'

const MyComponent = () => {
  useSyncContentHeight()

  const list = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k']

  return (
    <div className="flex flex-col">
      <p>list</p>
      {list.map((item) => (
        <p key={item}>{item}</p>
      ))}
    </div>
  )
}