mobx-react#useObserver TypeScript Examples

The following examples show how to use mobx-react#useObserver. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ColorPicker.tsx    From react-resume-site with GNU General Public License v3.0 6 votes vote down vote up 
PickerColor = () => {
  const { templateStore } = useStores();
  const [displayPick, setDisplayPicker] = useState(false);

  const collapse =(e:any) => {
    const colorWrapper = document.querySelector('.rs-color-wrapper')
    if(!colorWrapper?.contains(e.target) && displayPick) {
      setDisplayPicker(false);
    }
  }

  document.addEventListener('click', collapse, false);

  return useObserver(() => (
    <div className="rs-color-wrapper">
      <div className="rs-color-btn" style={{ background: templateStore.color }} onClick={() => { setDisplayPicker(!displayPick) }}></div>
      { displayPick && <ChromePicker color={templateStore.color} onChangeComplete={(color) => {
        templateStore.setColor(color.hex);
        localStorage.setItem(LOCAL_STORE.MD_COLOR, color.hex);
        document.body.style.setProperty('--bg', color.hex);
        // setDisplayPicker(false);
      }}></ChromePicker>}
    </div>
  ));
}
Example #2
Source File: Submit.tsx    From videotranscode.space with Apache License 2.0 5 votes vote down vote up 
Submit = observer(
  ({
    customText,
    customStyling
  }: {
    customText?: string
    customStyling?: string
  }) => {
    const { CluiStore, FileStore, loaded } = ComponentStore

    const { setSubmitStatus } = CluiStore

    const { allFiles } = FileStore

    const submit = React.useRef<HTMLButtonElement | null>(null)

    const [disabledTip, setTip] = useState(
      'Please wait while FFmpeg loads in the background, the entire process can take up to 30 seconds'
    )

    const handleSubmit = () => {
      setSubmitStatus(true)
    }

    useEffect(() => {
      if (loaded && allFiles.length === 0) {
        setTip('Please Add A File!')
      }
      if (loaded && allFiles.length > 0) {
        setTip('')
        if (submit && submit.current) {
          submit.current.removeAttribute('data-tip')
          submit.current.removeAttribute('data-for')
        }
      }
      // eslint-disable-next-line
    }, [loaded, allFiles, submit, submit.current])

    return useObserver(() => (
      <>
        <button
          className={`${
            customStyling || 'text-white font-bold py-2 px-4 mb-12 rounded'
          } ${
            !loaded || allFiles.length === 0
              ? 'bg-gray-500 '
              : 'bg-indigo-500 hover:bg-indigo-600'
          } `}
          data-tip
          data-for="tooltip"
          ref={submit}
          type="submit"
          onClick={handleSubmit}
          disabled={!loaded || allFiles.length === 0}>
          {customText || 'Submit'}
        </button>

        <ReactToolTip id="tooltip" place="bottom" effect="solid" type="dark">
          {disabledTip}
        </ReactToolTip>
      </>
    ))
  }
)