userslibrary

A lightweight React component library to search and display GitHub users, powered by the public GitHub API. Comes with a ready-to-use component and a standalone hook, so you can use as much or as little as you need.

Installation

npm install userslibrary

react and react-dom (v17 or higher) are required as peer dependencies — install them if your project doesn't already have them.

Usage

Drop-in component

import { GithubUserSearch } from 'userslibrary'

function App() {
  return <GithubUserSearch />
}

That's it — no extra CSS import needed, styles are bundled in automatically. Renders a search input and a live, debounced list of matching GitHub users (avatar + username), with built-in loading, error, and empty states.

Just the data (bring your own UI)

If you'd rather build your own UI and just need the fetching logic:

import { useFetchUsers } from 'userslibrary'

function MyCustomList() {
  const [query, setQuery] = useState('')
  const { data, loading, error } = useFetchUsers(query)

  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      {loading && <p>Loading...</p>}
      {error && <p>{error}</p>}
      {data.map((user) => (
        <div key={user.id}>{user.login}</div>
      ))}
    </div>
  )
}

API

<GithubUserSearch />

A fully self-contained component — no props required. Internally uses useFetchUsers and renders:

• A search input (debounced, 400ms)
• A default list of users when the search is empty
• Live search results from GitHub when a query is typed
• Loading, error, and "no results" states

useFetchUsers(query: string)

Returns:

| Field | Type | Description | |-----------|----------------|-----------------------------------------------| | data | GithubUser[] | List of matching users (or default list if query is empty) | | loading | boolean | true while a request is in flight | | error | string | Error message, empty string if none |

Automatically debounces requests as query changes — no need to debounce it yourself before passing it in.

GithubUser type

interface GithubUser {
  id: number
  login: string
  avatar_url: string
  html_url: string
  url: string
  type: string
  site_admin: boolean
  score?: number  // present only on search results
}

Notes

• Uses GitHub's public REST API — unauthenticated requests are rate-limited to 60/hour per IP. Fine for demos and light usage; not recommended for high-traffic production apps without adding your own auth token.
• Search is debounced by 400ms to avoid excessive API calls while typing.

License

MIT