Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lukasjhan/global-sdk-example
Global SDK example with React UI
https://github.com/lukasjhan/global-sdk-example
Last synced: 21 days ago
JSON representation
Global SDK example with React UI
- Host: GitHub
- URL: https://github.com/lukasjhan/global-sdk-example
- Owner: lukasjhan
- License: mit
- Created: 2023-12-17T13:38:35.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2024-03-29T14:26:18.000Z (8 months ago)
- Last Synced: 2024-04-12T05:09:10.993Z (7 months ago)
- Language: TypeScript
- Size: 8.99 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Global SDK Example
## Introduction
This example show how to integrate the SDK with REACT UI components. In the past, it was not possible to synchronize React's life cycle with the global object(window), so we had to use Hack to do so.
like below:
```javascript
const Provider = ({ children }: { children: any }) => {
const [data, setData] = useState({
project: null,
user: null,
workspaces: [],
lang: i18n.language.substring(0, 2),
design: null,
});
const setProject = (project: Project) => {
setData((prev) => ({ ...prev, project }));
};
const setDesign = (newDesign: Partial) => {
setData((prev) => ({ ...prev, design: { ...prev.design, ...newDesign } }));
};
const logout = () => {
setData((prev) => ({ ...prev, user: null }));
};
window.sdk.setProject = setProject;
window.sdk.setDesign = setDesign;
window.sdk.logout = logout;
...
```
We make a React Provider component that serve as a bridge between the SDK and the React components. The problem is that we have to use the global object(window) to expose the functions to the SDK, and this is NOT a good practice.
Now, we can use the new SDK to do the same thing, but in a better way using [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore#subscribing-to-an-external-store)
You can make a global SDK with React UI components easily and cleanly by using this method.
```javascript
function App() {
const data = useSyncExternalStore(
mySDKStore.subscribe,
mySDKStore.getSnapshot,
);
return (
{data.label}
{
window.setLabel('new Label');
}}
>
Button
);
}
```
And you can check the implementation in src/external.ts
```typescript
let data = { label: 'Edit src/App.tsx and save to reload.' };
let listeners: Array<() => void> = [];
export const mySDKStore = {
setLabel(newLabel: string) {
data = { label: newLabel };
emitChange();
},
subscribe(listener: () => void) {
listeners = [...listeners, listener];
return () => {
listeners = listeners.filter((l) => l !== listener);
};
},
getSnapshot() {
return data;
},
};
function emitChange() {
for (let listener of listeners) {
console.log(1);
listener();
}
}
window.data = data;
window.setLabel = mySDKStore.setLabel;
```
We can use global scope object as a hook into the components. This allows us to use the SDK in a more natural way. It's just like a normal React component.
## How to use and check proof of concept
1. Install dependencies
```bash
pnpm install
```
2. Run React Project
```bash
pnpm run start
```
It will start the application in http://localhost:3000
3. You can click the button in the webpage or use the console to change the label.
```javascript
// in your browser console
window.setLabel('new label');
```
