How to use the mobx-react.useLocalStore function in mobx-react

To help you get started, we’ve selected a few mobx-react 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 cypress-io / cypress / packages / ui-components / cypress / integration / editor-picker_spec.jsx View on Github external
const Wrapper = observer(({ onSelectSpy }) => {
        const state = useLocalStore(() => ({
          editors: defaultProps.editors,
          setChosenEditor: action((editor) => {
            state.chosenEditor = editor
          }),
          setOtherPath: action((otherPath) => {
            const otherOption = _.find(state.editors, { isOther: true })

            otherOption.openerId = otherPath
          }),
        }))

        const onSelect = (chosen) => {
          state.setChosenEditor(chosen)
          onSelectSpy(chosen)
        }
github PacktPublishing / Learn-React-Hooks / Chapter13 / chapter13_3 / src / AddTodo.js View on Github external
export default function AddTodo () {
  const todoStore = useTodoStore()
  const inputStore = useLocalStore(() => ({
    value: '',
    get disabled () {
      return !this.value
    },
    updateFromInput (e) {
      this.value = e.target.value
    },
    update (val) {
      this.value = val
    }
  }))

  function handleInput (e) {
    inputStore.updateFromInput(e)
  }
github hfour / h4bff / packages / frontend / src / mobx-transient.ts View on Github external
function useLocalStoreCorrected(initializer: (t: T) => U, t: T): U {
  return useLocalStore(initializer as any, t as any);
}
github cypress-io / cypress / packages / reporter / src / errors / error-file-path.jsx View on Github external
const EditorPickerModal = observer(({ editors, isOpen, onClose, onSetEditor }) => {
  const state = useLocalStore(() => ({
    chosenEditor: {},
    shouldShowValidation: false,
    setChosenEditor: action((editor) => {
      state.setShouldShowValidation(false)
      state.chosenEditor = editor
    }),
    setOtherPath: action((otherPath) => {
      const otherOption = _.find(editors, { isOther: true })

      otherOption.openerId = otherPath
    }),
    setShouldShowValidation: action((shouldShow) => {
      state.shouldShowValidation = shouldShow
    }),
  }))
github YDJ-FE / ts-react-webpack / src / containers / views / SocketDebugger / Browse / Message.tsx View on Github external
function Message({ message, style }: IProps) {
    const selfStore = useLocalStore(() => ({
        get time() {
            return moment(message.time).format('h:mm:ss a')
        },
        get color() {
            if (message.from === 'browser') {
                return '#87d068'
            } else if (message.from === 'server') {
                return '#2db7f5'
            }
            return '#108ee9'
        },
        get fromText() {
            if (message.from === 'browser') {
                return 'You'
            } else if (message.from === 'server') {
                return 'Server'
github cypress-io / cypress / packages / reporter / src / errors / error-file-path.jsx View on Github external
const ErrorFilePath = observer(({ fileDetails }) => {
  const state = useLocalStore(() => ({
    editors: [],
    isLoadingEditor: false,
    isModalOpen: false,
    setEditors: action((editors) => {
      state.editors = editors
    }),
    setIsLoadingEditor: action((isLoading) => {
      state.isLoadingEditor = isLoading
    }),
    setIsModalOpen: action((isOpen) => {
      state.isModalOpen = isOpen
    }),
  }))

  const openFileInEditor = () => {
    state.setIsLoadingEditor(true)