import Select from "@oshq/react-select"; import { useState } from "react"; import useDebounce from "./use-debounce"; import "@oshq/react-select/index.css"; const api = "https://registry.npmjs.com/-/v1/search?size=20&text="; const ChevronDown = ({ size }) => { return ( ); }; const LoadingIcon = ({ size }) => { return ( ); }; const searchNPMRegistry = async (name) => { try { const response = await fetch(api + name); if (response.ok) { return response.json(); } throw Error("Error loading registries."); } catch (e) { console.log(e); } }; const App = () => { const [selected, setSelected] = useState(undefined); const [searchText, setSearchText] = useState(""); const [options, setOptions] = useState( [] ); const [loading, setLoading] = useState(false); useDebounce( async () => { if (searchText) { const out = await searchNPMRegistry(searchText); if (out.objects) { setOptions( out.objects.map((o) => { const pkg = o.package; return { label: pkg.name, render: () => (

{pkg.name}

v{pkg.version}

), value: pkg.name, package: pkg, }; }) ); } } else { setOptions([]); } setLoading(false); }, 500, [searchText] ); return (

Country code selection

NPM registry search

Inside dialog box