jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix ui: update zustand doc (#2095)

Browse source
This commit is contained in:
Delirium 2024-04-16 14:33:02 +02:00 • committed by GitHub
parent 3703c62829
commit a32177dd0f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
frontend/app/components/Client/Integrations/ZustandDoc/ZustandDoc.js
View file

@ -31,51 +31,60 @@ const ZustandDoc = (props) => {
<Highlight className="js">
{`import create from "zustand";
import Tracker from '@openreplay/tracker';
import trackerZustand from '@openreplay/tracker-zustand';
import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand';
const tracker = new Tracker({
projectKey: ${projectKey},
});
const zustandPlugin = tracker.use(trackerZustand())
// store name, optional
// randomly generated if undefined
const bearStoreLogger = zustandPlugin('bear_store')
// as per https://docs.pmnd.rs/zustand/guides/typescript#middleware-that-doesn't-change-the-store-type
// cast type to new one
// but this seems to not be required and everything is working as is
const zustandPlugin = tracker.use(trackerZustand()) as unknown as StateLogger
const useBearStore = create(
bearStoreLogger((set: any) => ({
zustandPlugin((set: any) => ({
bears: 0,
increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
)`}
}),
// store name is optional
// and is randomly generated if undefined
'bear_store'
)
)
`}
</Highlight>
}
second={
<Highlight className="js">
{`import create from "zustand";
import Tracker from '@openreplay/tracker/cjs';
import trackerZustand from '@openreplay/tracker-zustand/cjs';
import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand/cjs';
const tracker = new Tracker({
projectKey: ${projectKey},
});
const zustandPlugin = tracker.use(trackerZustand())
// store name, optional
// randomly generated if undefined
const bearStoreLogger = zustandPlugin('bear_store')
// as per https://docs.pmnd.rs/zustand/guides/typescript#middleware-that-doesn't-change-the-store-type
// cast type to new one
// but this seems to not be required and everything is working as is
const zustandPlugin = tracker.use(trackerZustand()) as unknown as StateLogger
const useBearStore = create(
bearStoreLogger((set: any) => ({
zustandPlugin((set: any) => ({
bears: 0,
increasePopulation: () => set((state: any) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
}),
// store name is optional
// and is randomly generated if undefined
'bear_store'
)
)`}
</Highlight>
}