NpmPackageInstaller.tsx

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then((res) => res.json());

function NpmPackageInstaller({
    name,
}: {
    name: string;
}) {
  const { data, error } = useSWR(`https://registry.npmjs.org/${name}`, fetcher);

  if (error) return <div>Error loading package version</div>;
  if (!data) return <div>Loading...</div>;

  const latestVersion = data['dist-tags'].latest;

  return (
    <>
      npm i {name}@{latestVersion}
    </>
  );
}

export default NpmPackageInstaller;