How to use observable-hooks - 10 common examples

To help you get started, we’ve selected a few observable-hooks examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github crimx / ext-saladict / src / content / components / MenuBar / SearchBox.tsx View on Github external
export const SearchBox: FC = props => {
  // Textarea also shares the text so only replace here
  const text = props.text.replace(/\s+/g, ' ')

  const [onSearchBoxFocusBlur, searchBoxFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onSuggestFocusBlur, suggestFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onShowSugget, onShowSugget$] = useObservableCallback(identity)

  const isShowSuggest = useObservableState(
    useObservable(
      inputs$ =>
        combineLatest(
          inputs$,
          merge(
            // only show suggest when start typing
            searchBoxFocusBlur$.pipe(filter(isFocus => !isFocus)),
            suggestFocusBlur$,
            onShowSugget$
          )
        ).pipe(
          map(([[enableSuggest, text], shouldShowSuggest]) =>
            Boolean(enableSuggest && text && shouldShowSuggest)
          ),
          distinctUntilChanged()
        ),
      [props.enableSuggest, props.text] as [boolean, string]
github crimx / ext-saladict / src / content / components / MenuBar / MenuBar.tsx View on Github external
export const MenuBar: FC = props => {
  const { t } = useTranslate(['content', 'common'])

  const [updateProfileHeight, profileHeight$] = useObservableCallback(
    heightChangeTransform
  )

  const [updateSBHeight, searchBoxHeight$] = useObservableCallback(
    heightChangeTransform
  )

  // update panel min height
  useSubscription(
    useObservable(() =>
      combineLatest(profileHeight$, searchBoxHeight$).pipe(
        // a little delay for organic feeling
        debounceTime(100),
        map(heights => {
          const max = Math.max(...heights)
          return max > 0 ? max + 72 : 0
        })
      )
    ),
    props.onHeightChanged
  )

  return (
    <header>
      </header>
github crimx / observable-hooks / examples / typeahead / src / Suggests.tsx View on Github external
export const Suggests: React.FC = props =&gt; {
  const fetchFunc$ = useObservable(pluckFirst, [props.fetchFunc])
  return useObservableState(
    // A stream of React elements! I know it's mind-blowing.
    useObservable(
      inputs$ =&gt;
        inputs$.pipe(
          filter(([text]) =&gt; text.length &gt; 1),
          distinctUntilChanged(),
          switchMap(([text]) =&gt;
            // delay in sub-stream so that users can see the
            // searching state quickly. But no actual request
            // is performed until the delay is hit.
            forkJoin(
              // minimum 1s delay to prevent flickering if user got really greate network condition
              timer(1000),
              timer(750).pipe(
                tap(() =&gt; console.log('&gt;&gt;&gt; really start searching...')),
github crimx / observable-hooks / examples / typeahead / src / Suggests.tsx View on Github external
export const Suggests: React.FC = props =&gt; {
  const fetchFunc$ = useObservable(pluckFirst, [props.fetchFunc])
  return useObservableState(
    // A stream of React elements! I know it's mind-blowing.
    useObservable(
      inputs$ =&gt;
        inputs$.pipe(
          filter(([text]) =&gt; text.length &gt; 1),
          distinctUntilChanged(),
          switchMap(([text]) =&gt;
            // delay in sub-stream so that users can see the
            // searching state quickly. But no actual request
            // is performed until the delay is hit.
            forkJoin(
              // minimum 1s delay to prevent flickering if user got really greate network condition
              timer(1000),
              timer(750).pipe(
                tap(() =&gt; console.log('&gt;&gt;&gt; really start searching...')),
                withLatestFrom(fetchFunc$),
                switchMap(([, fetchFunc]) =&gt; fetchFunc(text))
              )
github crimx / ext-saladict / src / content / components / MenuBar / SearchBox.tsx View on Github external
export const SearchBox: FC = props =&gt; {
  // Textarea also shares the text so only replace here
  const text = props.text.replace(/\s+/g, ' ')

  const [onSearchBoxFocusBlur, searchBoxFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onSuggestFocusBlur, suggestFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onShowSugget, onShowSugget$] = useObservableCallback(identity)

  const isShowSuggest = useObservableState(
    useObservable(
      inputs$ =&gt;
        combineLatest(
          inputs$,
          merge(
            // only show suggest when start typing
            searchBoxFocusBlur$.pipe(filter(isFocus =&gt; !isFocus)),
            suggestFocusBlur$,
            onShowSugget$
          )
        ).pipe(
          map(([[enableSuggest, text], shouldShowSuggest]) =&gt;
            Boolean(enableSuggest &amp;&amp; text &amp;&amp; shouldShowSuggest)
          ),
github crimx / ext-saladict / src / content / components / MenuBar / SearchBox.tsx View on Github external
export const SearchBox: FC = props =&gt; {
  // Textarea also shares the text so only replace here
  const text = props.text.replace(/\s+/g, ' ')

  const [onSearchBoxFocusBlur, searchBoxFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onSuggestFocusBlur, suggestFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onShowSugget, onShowSugget$] = useObservableCallback(identity)

  const isShowSuggest = useObservableState(
    useObservable(
      inputs$ =&gt;
        combineLatest(
          inputs$,
          merge(
            // only show suggest when start typing
github crimx / ext-saladict / src / content / components / MenuBar / MenuBar.tsx View on Github external
export const MenuBar: FC = props =&gt; {
  const { t } = useTranslate(['content', 'common'])

  const [updateProfileHeight, profileHeight$] = useObservableCallback(
    heightChangeTransform
  )

  const [updateSBHeight, searchBoxHeight$] = useObservableCallback(
    heightChangeTransform
  )

  // update panel min height
  useSubscription(
    useObservable(() =&gt;
      combineLatest(profileHeight$, searchBoxHeight$).pipe(
        // a little delay for organic feeling
        debounceTime(100),
        map(heights =&gt; {
          const max = Math.max(...heights)
          return max &gt; 0 ? max + 72 : 0
        })
      )
    ),
    props.onHeightChanged
github crimx / observable-hooks / examples / typeahead / src / Suggests.tsx View on Github external
export const Suggests: React.FC = props =&gt; {
  const fetchFunc$ = useObservable(pluckFirst, [props.fetchFunc])
  return useObservableState(
    // A stream of React elements! I know it's mind-blowing.
    useObservable(
      inputs$ =&gt;
        inputs$.pipe(
          filter(([text]) =&gt; text.length &gt; 1),
          distinctUntilChanged(),
          switchMap(([text]) =&gt;
            // delay in sub-stream so that users can see the
            // searching state quickly. But no actual request
            // is performed until the delay is hit.
            forkJoin(
              // minimum 1s delay to prevent flickering if user got really greate network condition
              timer(1000),
              timer(750).pipe(
                tap(() =&gt; console.log('&gt;&gt;&gt; really start searching...')),
                withLatestFrom(fetchFunc$),
github crimx / ext-saladict / src / content / components / MenuBar / SearchBox.tsx View on Github external
export const SearchBox: FC = props =&gt; {
  // Textarea also shares the text so only replace here
  const text = props.text.replace(/\s+/g, ' ')

  const [onSearchBoxFocusBlur, searchBoxFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onSuggestFocusBlur, suggestFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onShowSugget, onShowSugget$] = useObservableCallback(identity)

  const isShowSuggest = useObservableState(
    useObservable(
      inputs$ =&gt;
        combineLatest(
          inputs$,
          merge(
            // only show suggest when start typing
            searchBoxFocusBlur$.pipe(filter(isFocus =&gt; !isFocus)),
            suggestFocusBlur$,
            onShowSugget$
          )
        ).pipe(
          map(([[enableSuggest, text], shouldShowSuggest]) =&gt;
            Boolean(enableSuggest &amp;&amp; text &amp;&amp; shouldShowSuggest)
          ),
          distinctUntilChanged()
        ),
github crimx / ext-saladict / src / content / components / MenuBar / MenuBar.tsx View on Github external
export const MenuBar: FC = props =&gt; {
  const { t } = useTranslate(['content', 'common'])

  const [updateProfileHeight, profileHeight$] = useObservableCallback(
    heightChangeTransform
  )

  const [updateSBHeight, searchBoxHeight$] = useObservableCallback(
    heightChangeTransform
  )

  // update panel min height
  useSubscription(
    useObservable(() =&gt;
      combineLatest(profileHeight$, searchBoxHeight$).pipe(
        // a little delay for organic feeling
        debounceTime(100),
        map(heights =&gt; {
          const max = Math.max(...heights)
          return max &gt; 0 ? max + 72 : 0
        })
      )
    ),
    props.onHeightChanged
  )

  return (
    <header>
      </header>

observable-hooks

React hooks for RxJS Observables. Simple, flexible, testable and performant.

MIT
Latest version published 8 months ago

Package Health Score

68 / 100
Full package analysis