Skip to content

Instantly share code, notes, and snippets.

@asilvadesigns
Last active February 25, 2024 03:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save asilvadesigns/9945aabe2f18a02a3219f7b97e6d4acf to your computer and use it in GitHub Desktop.
Save asilvadesigns/9945aabe2f18a02a3219f7b97e6d4acf to your computer and use it in GitHub Desktop.
run "npm create vite@latest" then replace App.tsx with contents below && npm run dev.
import { useEffect, useState } from "react";
interface MusicKitInstance {
stuff: string;
}
declare global {
interface Window {
MusicKit?: {
configure: () => Promise<void>;
getInstance: () => MusicKitInstance | null;
};
}
}
const useMusic = () => {
const [instance, setInstance] = useState(window.MusicKit?.getInstance());
useEffect(() => {
if (instance) return;
(async () => {
await window.MusicKit?.configure().then(() => {
setInstance(window.MusicKit?.getInstance());
});
})();
}, []);
return instance;
};
function App() {
// lies ftw
window.MusicKit = {
configure: () =>
new Promise((resolve) => {
setTimeout(() => resolve(), 2000);
}),
getInstance: () => ({ stuff: "hello world" }),
};
const music = useMusic();
return (
<div>{music?.stuff ? <div>{music.stuff}</div> : <div>nothing</div>}</div>
);
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment