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!

Readme

Keywords

none

Package Sidebar

Install

npm i re-observe

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

88.9 kB

Total Files

22

Last publish

Collaborators

  • josepot