Untitled

chciałbym sterować tym co wyświetla topbar, z dowolnego miejsca w projekcie

<TopbarContext>
    <Topbar/>
    <Page>
      <Form/>
    </Page>
</TopbarContext>



///


const SomeDropdown = ({
                         phrase,
                         placeholder,
                         onClose,
                         onSearchPhraseChange,}) => {
  const {title, search, action} = useTopbar()

  useEffect(() => {
    title.push(placeholder)
    return title.pop()
  }, [title, placeholder])

  useEffect(() => {
    action.backBtn.show()
    action.backBtn.subscribe(onClose)
    return () => {
      action.backBtn.hide()
      action.backBtn.unsubscribe(onClose)
    }
  }, [action.backBtn, onClose])

  useEffect(() => {
    search.setPhrase(phrase)
    search.subscribe(onSearchPhraseChange)
    return () => {
      search.setPhrase("");
      search.unsubscribe(onSearchPhraseChange);
    }
  }, [search, phrase, onSearchPhraseChange])




  return <div>
    ...rest
  </div>

}

SomeDropdown jest używany gdzieś w komponencie Form,
  kiedy renderuje się SomeDropdown, w topBarze automatycznie pojawia się szukajka,
  która pozwala przeszukać jakieś itemy renderoewane przez SomeDropdown


trochę słabe rozwiązanie bo muszę w tych useEfectach ustawiać wszystkie propsy dla topbara, idealnie byłoby gdybym mógł sterować tym przez komponent, czyli:



const SomeDropdown = ({
                        phrase,
                        placeholder,
                        onClose,
                        onSearchPhraseChange,}) => {

  return <div>
    <Topbar.Title value={placeholder}/>
    <Topbar.BackButton onClick={onClose} />
    <Topbar.SearchInput onChange={onSearchPhraseChange} value={phrase}/>

    ...rest
  </div>

}



const SomeDropdown = ({
                        phrase,
                        placeholder,
                        onClose,
                        onSearchPhraseChange,}) => {

  return <div>
    <Topbar.Title value={placeholder}/>
    <Topbar.BackButton onClick={onClose} />
    <Topbar.SearchInput onChange={onSearchPhraseChange} value={phrase}/>

    ...rest
  </div>

}


albo po prostu


const SomeDropdown = ({
                        phrase,
                        placeholder,
                        onClose,
                        onSearchPhraseChange,}) => {

  return <div>
    <Topbar
      title={placeholder}
      onBackClick={onClose}
      onSearchChange={onSearchPhraseChange}
      searchValue={phrase}
    />

    ...rest
  </div>

}