search

storybookjs / addon-react-native-server

A replacement for @storybook/react-native-server which will enable multiple devices to sync over websockets
MIT License
6 stars 0 forks source link

Is it possible to use this add-on to synchronize state across multiple devices? #7

Closed viss5vuus98 closed 4 weeks ago

viss5vuus98 commented 1 month ago

I'm currently running storybook/react-native and storybook/addon-react-native-web, and I've successfully used this add-on to control both. It works great for syncing stories!

I'm wondering if it's also possible to use this add-on to synchronize React component state across multiple devices. Is this a supported feature or something that could be implemented?

Thank you for your time

viss5vuus98 commented 1 month ago

Sorry , but I can't update the label ... , it's not a bug

dannyhw commented 1 month ago

Not sure I understand, could you elaborate on what you mean?

You can control multiple devices, for example you can connect with an android device, ios and the web storybook and they should all stay in sync. Is that what you mean?

viss5vuus98 commented 1 month ago

I'm asking about synchronizing the internal state of React components across different devices on storybook.

For example, if I toggle a button component's state (e.g., from "off" to "on") in a browser, is it possible for this state change to be automatically synchronized to the same component running on other connected devices (like iOS or Android)?

dannyhw commented 1 month ago

@viss5vuus98 only if via controls, if you want to use this as a way to synchronise any component state that sounds like a separate idea. Though thats not too difficult to do if you take the code from this addon and make your own small state syncing server. You could even make a useSyncedState hook or something to make it easier to use.

viss5vuus98 commented 1 month ago

@dannyhw Sound great, i will try it Thanks for your response and for pointing me in the right direction.

dannyhw commented 1 month ago

@viss5vuus98 heres an example for you

https://github.com/dannyhw/syncing-state/blob/main/ws-server.ts

app code: https://github.com/dannyhw/syncing-state/blob/main/src/App.tsx

pretty much a first draft but I think you could expand on it

I just start up the server as a vite plugin so I can restart the ws server on change etc

You need to make sure any data you send is serializeable to json though

viss5vuus98 commented 4 weeks ago

@dannyhw thank you for providing these examples. I've successfully created a custom addon by referring to your code samples and the addon preset you shared here !