re-observe
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    Re-RxJS

    Re-RxJS Logo

    React bindings for RxJS

    Docs

    All Contributors

    Main features

    • 🌀 Truly Reactive
    • ⚡️ Highly performant and free of memory-leaks
    • 🔀 First class support for React Suspense
    • ✂️ Decentralized and composable, thus enabling optimal code-splitting
    • 🔬 Tiny and tree-shakeable
    • 💪 Supports TypeScript

    Docs

    const [useDocs] = connectObservable(NEVER)
     
    function Docs() {
      const docs = useDocs()
      return <pre>{docs}</pre>
    }
     
    function App() {
      return (
        <>
          <h1>Docs</h1>
          <Suspense fallback={<span>Comming soon...</span>}>
            <Docs />
          </Suspense>
        </>
      )
    }

    Examples

    import React, { Suspense } from "react"
    import { Subject } from "rxjs"
    import { startWith, map } from "rxjs/operators"
    import { connectObservable, switchMapSuspended } from "re-rxjs"
    import { Header, Search, LoadingResults, Repo } from "./components"
     
    interface Repo {
      id: number
      name: string
      description: string
      author: string
      stars: number
      lastUpdate: number
    }
     
    const searchInput$ = new Subject<string>()
    const onSubmit = (value: string) => searchInput$.next(value)
     
    const findRepos = (query: string): Promise<Repo[]> =>
      fetch(`https://api.github.com/search/repositories?q=${query}`)
        .then(response => response.json())
        .then(rawData =>
          (rawData.items ?? []).map((repo: any) => ({
            id: repo.id,
            name: repo.name,
            description: repo.description,
            author: repo.owner.login,
            stars: repo.stargazers_count,
            lastUpdate: Date.parse(repo.update_at),
          })),
        )
     
    const [useRepos, repos$] = connectObservable(
      searchInput$.pipe(
        switchMapSuspended(findRepos),
        startWith(null),
      ),
    )
     
    function Repos() {
      const repos = useRepos()
     
      if (repos === null) {
        return null
      }
     
      if (repos.length === 0) {
        return <div>No results were found.</div>
      }
     
      return (
        <ul>
          {repos.map(repo => (
            <li key={repo.id}>
              <Repo {...repo} />
            </li>
          ))}
        </ul>
      )
    }
     
    const [useMostRecentlyUpdatedRepo] = connectObservable(
      repos$.pipe(
        map(repos =>
          Array.isArray(repos) && repos.length > 0
            ? repos.reduce((winner, current) =>
                current.lastUpdate > winner.lastUpdate ? current : winner,
              )
            : null,
        ),
      ),
    )
     
    function MostRecentlyUpdatedRepo() {
      const mostRecent = useMostRecentlyUpdatedRepo()
     
      if (mostRecent === null) {
        return null
      }
     
      const { id, name } = mostRecent
      return (
        <div>
          The most recently updated repo is <a href={`#${id}`}>{name}</a>
        </div>
      )
    }
     
    export default function App() {
      return (
        <>
          <Header>Search Github Repos</Header>
          <Search onSubmit={onSubmit} />
          <Suspense fallback={<LoadingResults />}>
            <MostRecentlyUpdatedRepo />
            <Repos />
          </Suspense>
        </>
      )
    }

    Contributors ✨

    Thanks goes to these wonderful people (emoji key):


    Josep M Sobrepere

    💻 🤔 🚧 ⚠️ 👀

    Víctor Oliva

    🤔 👀 💻 ⚠️

    Ed

    🎨

    This project follows the all-contributors specification. Contributions of any kind welcome!

    Keywords

    none

    Install

    npm i re-observe

    DownloadsWeekly Downloads

    3

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    88.9 kB

    Total Files

    22

    Last publish

    Collaborators

    • josepot