kandi background
Explore Kits

mobx | Simple , scalable state management | State Container library

 by   mobxjs TypeScript Version: mobx@6.5.0 License: MIT

 by   mobxjs TypeScript Version: mobx@6.5.0 License: MIT

Download this library from

kandi X-RAY | mobx Summary

mobx is a TypeScript library typically used in User Interface, State Container, React applications. mobx has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). The philosophy behind MobX is simple:.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • mobx has a medium active ecosystem.
  • It has 25031 star(s) with 1662 fork(s). There are 376 watchers for this library.
  • There were 10 major release(s) in the last 12 months.
  • There are 15 open issues and 1776 have been closed. On average issues are closed in 11 days. There are 9 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of mobx is mobx@6.5.0
mobx Support
Best in #State Container
Average in #State Container
mobx Support
Best in #State Container
Average in #State Container

quality kandi Quality

  • mobx has no bugs reported.
mobx Quality
Best in #State Container
Average in #State Container
mobx Quality
Best in #State Container
Average in #State Container

securitySecurity

  • mobx has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
mobx Security
Best in #State Container
Average in #State Container
mobx Security
Best in #State Container
Average in #State Container

license License

  • mobx is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
mobx License
Best in #State Container
Average in #State Container
mobx License
Best in #State Container
Average in #State Container

buildReuse

  • mobx releases are available to install and integrate.
  • Installation instructions are not available. Examples and code snippets are available.
mobx Reuse
Best in #State Container
Average in #State Container
mobx Reuse
Best in #State Container
Average in #State Container
Top functions reviewed by kandi - BETA

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

mobx Key Features

Simple, scalable state management.

A quick example

copy iconCopydownload iconDownload
import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"

// Model the application state.
class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

// Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

ReactDOM.render(<TimerView timer={myTimer} />, document.body)

// Update the 'Seconds passed: X' text every second.
setInterval(() => {
    myTimer.increase()
}, 1000)

How to get the DOM element of an `observer` wrapped component?

copy iconCopydownload iconDownload
const divRef = useRef();

useEffect(() => {
  console.log(divRef.current.clientHeight);
}, []);

return <div ref={divRef}></div>

Unable to display generated HTML ,from Showdown plugin, in React component

copy iconCopydownload iconDownload
import React, { useMemo, useEffect } from 'react';
import Showdown from 'showdown';
const buble = require('buble');

const MarkdownToJSX = ({ md }) => {
  if (typeof md !== 'string') return null;
  const makeComponent = useMemo(() => {
    const converter = new Showdown.Converter({
      tables: true,
      simplifiedAutoLink: true,
      strikethrough: true,
      tasklists: true,
    });
    const html = `<>${converter.makeHtml(md)}</>`;
    const code = buble.transform(html).code;
    const makeComponent = Function('React', 'return ' + code);
    return makeComponent;
  }, [md]);

  return makeComponent(React);
};

Observer not working with useLocalObservable

copy iconCopydownload iconDownload
import { Observer, useLocalObservable } from 'mobx-react-lite';

function App() {
  const state = useLocalObservable(() => ({
    count: 0,
    increment() { state.count++ },
    decrement() { state.count-- },
  }));

  return (
    <div>
      <Observer>{() => <div>{state.count}</div>}</Observer>
      <button onClick={state.decrement}>decrement</button>
      <button onClick={state.increment}>increment</button>
    </div>
  );
}

Use mobx and react get an error: Too many re-renders. React limits the number of renders to prevent an infinite loop

copy iconCopydownload iconDownload
const SimpleMask: FC = () => {
    const [visible, setVisible] = useState(false)
    
    useEffect(() => {
      setVisible(store.isLoading)
    }, [store.isLoading])

    return (
        <Mask visible={visible} />
    )
}
const SimpleMask: FC = () => {
    return (
        <Mask visible={store.isLoading} />
    )
}
-----------------------
const SimpleMask: FC = () => {
    const [visible, setVisible] = useState(false)
    
    useEffect(() => {
      setVisible(store.isLoading)
    }, [store.isLoading])

    return (
        <Mask visible={visible} />
    )
}
const SimpleMask: FC = () => {
    return (
        <Mask visible={store.isLoading} />
    )
}

Runtime error appeared after updating to webpack 5. TypeError: Cannot read properties of undefined (reading 'default')

copy iconCopydownload iconDownload
~/utils (~ is aliased in my webpack)
  /fileWithTheImport.ts (
  /fileToImport.ts
  /index.ts (exports * from the other two files)
-----------------------
import { UserEntity } from 'models';
import type { UserEntity } from 'models';
-----------------------
import { UserEntity } from 'models';
import type { UserEntity } from 'models';

How to solve conflict between react-router-dom v6 and mobx?

copy iconCopydownload iconDownload
import UserCabinet from "../../pages/user-cabinet/user-cabinet";

const userPaths = [
  {
    name: "Personal cabinet",
    path: "/personalCabinet",
    component: UserCabinet,
  },
];
const AppRouter = () => {
  const { userStore } = useContext(Context);

  return (
    <Routes>
      ...
      {userStore.isAuth && userPaths.map(({ path, component }) => (
        <Route path={path} element={component()} /> // <-- invoking component
      ))}
      ...
    </Routes>
  );
};
import UserCabinet from "../../pages/user-cabinet/user-cabinet";

const userPaths = [
  {
    name: "Personal cabinet",
    path: "/personalCabinet",
    component: UserCabinet,
  },
];
const AppRouter = () => {
  const { userStore } = useContext(Context);

  return (
    <Routes>
      ...
      {userStore.isAuth && userPaths.map(({ path, component: Component }) => (
        <Route
          key={path}
          path={path}
          element={<Component />} // <-- pass as JSX
        />
      ))}
      ...
    </Routes>
  );
};
-----------------------
import UserCabinet from "../../pages/user-cabinet/user-cabinet";

const userPaths = [
  {
    name: "Personal cabinet",
    path: "/personalCabinet",
    component: UserCabinet,
  },
];
const AppRouter = () => {
  const { userStore } = useContext(Context);

  return (
    <Routes>
      ...
      {userStore.isAuth && userPaths.map(({ path, component }) => (
        <Route path={path} element={component()} /> // <-- invoking component
      ))}
      ...
    </Routes>
  );
};
import UserCabinet from "../../pages/user-cabinet/user-cabinet";

const userPaths = [
  {
    name: "Personal cabinet",
    path: "/personalCabinet",
    component: UserCabinet,
  },
];
const AppRouter = () => {
  const { userStore } = useContext(Context);

  return (
    <Routes>
      ...
      {userStore.isAuth && userPaths.map(({ path, component: Component }) => (
        <Route
          key={path}
          path={path}
          element={<Component />} // <-- pass as JSX
        />
      ))}
      ...
    </Routes>
  );
};
-----------------------
import UserCabinet from "../../pages/user-cabinet/user-cabinet";

const userPaths = [
  {
    name: "Personal cabinet",
    path: "/personalCabinet",
    component: UserCabinet,
  },
];
const AppRouter = () => {
  const { userStore } = useContext(Context);

  return (
    <Routes>
      ...
      {userStore.isAuth && userPaths.map(({ path, component }) => (
        <Route path={path} element={component()} /> // <-- invoking component
      ))}
      ...
    </Routes>
  );
};
import UserCabinet from "../../pages/user-cabinet/user-cabinet";

const userPaths = [
  {
    name: "Personal cabinet",
    path: "/personalCabinet",
    component: UserCabinet,
  },
];
const AppRouter = () => {
  const { userStore } = useContext(Context);

  return (
    <Routes>
      ...
      {userStore.isAuth && userPaths.map(({ path, component: Component }) => (
        <Route
          key={path}
          path={path}
          element={<Component />} // <-- pass as JSX
        />
      ))}
      ...
    </Routes>
  );
};
-----------------------
import UserCabinet from "../../pages/user-cabinet/user-cabinet";

const userPaths = [
  {
    name: "Personal cabinet",
    path: "/personalCabinet",
    component: UserCabinet,
  },
];
const AppRouter = () => {
  const { userStore } = useContext(Context);

  return (
    <Routes>
      ...
      {userStore.isAuth && userPaths.map(({ path, component }) => (
        <Route path={path} element={component()} /> // <-- invoking component
      ))}
      ...
    </Routes>
  );
};
import UserCabinet from "../../pages/user-cabinet/user-cabinet";

const userPaths = [
  {
    name: "Personal cabinet",
    path: "/personalCabinet",
    component: UserCabinet,
  },
];
const AppRouter = () => {
  const { userStore } = useContext(Context);

  return (
    <Routes>
      ...
      {userStore.isAuth && userPaths.map(({ path, component: Component }) => (
        <Route
          key={path}
          path={path}
          element={<Component />} // <-- pass as JSX
        />
      ))}
      ...
    </Routes>
  );
};

Flutter mobx mobx_codegen generates null safety code for computed getters

copy iconCopydownload iconDownload
  mobx: ^1.2.1+4
  flutter_mobx: ^1.1.0+2
  build_runner: ^1.11.5
  mobx_codegen: ^1.1.2
  mobx: ^2.0.6+1
  flutter_mobx: ^2.0.4
  build_runner: ^2.1.7
  mobx_codegen: ^2.0.5+2
name: XPTO
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  mobx: ^2.0.6+1
  flutter_mobx: ^2.0.4
  get_it: ^7.2.0
  flutter_search_bar: ^3.0.0-dev.1
  carousel_slider: ^4.0.0
  intl: ^0.17.0
  image_picker: ^0.8.4+5
  image_cropper: ^1.4.1
  parse_server_sdk_flutter: ^3.1.0
  cpf_cnpj_validator: ^2.0.0
  brasil_fields: ^1.3.0
  mask_text_input_formatter: ^2.1.0
  badges: ^2.0.2
  flutter_rating_bar: ^4.0.0
  expandable: ^5.0.1
  flutter_easyloading: ^3.0.3
  internet_connection_checker: ^0.0.1+3
  cached_network_image: ^3.2.0
  flutter_keyboard_visibility: ^5.1.1
  json_annotation: ^4.4.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: ^2.1.7
  mobx_codegen: ^2.0.5+2
  graphs: ^2.1.0
  json_serializable: ^6.1.4

dependency_overrides:
  plugin_platform_interface: ^2.0.0
  build_resolvers: ^2.0.6
  web_socket_channel: ^2.0.0
  analyzer: ^3.2.0

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^1.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  assets:
    - images/logo.jpeg
    - images/empty.jpg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
-----------------------
  mobx: ^1.2.1+4
  flutter_mobx: ^1.1.0+2
  build_runner: ^1.11.5
  mobx_codegen: ^1.1.2
  mobx: ^2.0.6+1
  flutter_mobx: ^2.0.4
  build_runner: ^2.1.7
  mobx_codegen: ^2.0.5+2
name: XPTO
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  mobx: ^2.0.6+1
  flutter_mobx: ^2.0.4
  get_it: ^7.2.0
  flutter_search_bar: ^3.0.0-dev.1
  carousel_slider: ^4.0.0
  intl: ^0.17.0
  image_picker: ^0.8.4+5
  image_cropper: ^1.4.1
  parse_server_sdk_flutter: ^3.1.0
  cpf_cnpj_validator: ^2.0.0
  brasil_fields: ^1.3.0
  mask_text_input_formatter: ^2.1.0
  badges: ^2.0.2
  flutter_rating_bar: ^4.0.0
  expandable: ^5.0.1
  flutter_easyloading: ^3.0.3
  internet_connection_checker: ^0.0.1+3
  cached_network_image: ^3.2.0
  flutter_keyboard_visibility: ^5.1.1
  json_annotation: ^4.4.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: ^2.1.7
  mobx_codegen: ^2.0.5+2
  graphs: ^2.1.0
  json_serializable: ^6.1.4

dependency_overrides:
  plugin_platform_interface: ^2.0.0
  build_resolvers: ^2.0.6
  web_socket_channel: ^2.0.0
  analyzer: ^3.2.0

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^1.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  assets:
    - images/logo.jpeg
    - images/empty.jpg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages
-----------------------
  mobx: ^1.2.1+4
  flutter_mobx: ^1.1.0+2
  build_runner: ^1.11.5
  mobx_codegen: ^1.1.2
  mobx: ^2.0.6+1
  flutter_mobx: ^2.0.4
  build_runner: ^2.1.7
  mobx_codegen: ^2.0.5+2
name: XPTO
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  mobx: ^2.0.6+1
  flutter_mobx: ^2.0.4
  get_it: ^7.2.0
  flutter_search_bar: ^3.0.0-dev.1
  carousel_slider: ^4.0.0
  intl: ^0.17.0
  image_picker: ^0.8.4+5
  image_cropper: ^1.4.1
  parse_server_sdk_flutter: ^3.1.0
  cpf_cnpj_validator: ^2.0.0
  brasil_fields: ^1.3.0
  mask_text_input_formatter: ^2.1.0
  badges: ^2.0.2
  flutter_rating_bar: ^4.0.0
  expandable: ^5.0.1
  flutter_easyloading: ^3.0.3
  internet_connection_checker: ^0.0.1+3
  cached_network_image: ^3.2.0
  flutter_keyboard_visibility: ^5.1.1
  json_annotation: ^4.4.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  build_runner: ^2.1.7
  mobx_codegen: ^2.0.5+2
  graphs: ^2.1.0
  json_serializable: ^6.1.4

dependency_overrides:
  plugin_platform_interface: ^2.0.0
  build_resolvers: ^2.0.6
  web_socket_channel: ^2.0.0
  analyzer: ^3.2.0

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^1.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  assets:
    - images/logo.jpeg
    - images/empty.jpg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

Cannot read properties of undefined - javascript class

copy iconCopydownload iconDownload
    // Use arrow function to define methods
    increment = () => {
        this.counter++;
    }

    decrement = () => {
        this.counter--;
    }

    increase = (value) => {
        this.counter = this.counter + value;
    }

How use Mobx 6 storage with React 17?

copy iconCopydownload iconDownload
class TestStoreSecond {
  // ...

  get textFromFirstStore() {
    return testStoreFirst.textForSecondTestStore
  }

  // ...
}

// And in React access it just as before (it's a getter, not a function)
<p>{testStoreSecond.textFromFirstStore}</p>

NPM: Link peer dependency to package alias

copy iconCopydownload iconDownload
set NODE_ENV=development

npm install mobx@5.15.4 --save
npm install mobx-react@6.1.8 --save
npm install @new/mobx@npm:mobx@^6.3.13 --save
npm install @new/mobx-react@npm:mobx-react@^7.2.1 --save
cd ./node_modules/@new/mobx-react
npm install --ignore-scripts
-----------------------
set NODE_ENV=development

npm install mobx@5.15.4 --save
npm install mobx-react@6.1.8 --save
npm install @new/mobx@npm:mobx@^6.3.13 --save
npm install @new/mobx-react@npm:mobx-react@^7.2.1 --save
cd ./node_modules/@new/mobx-react
npm install --ignore-scripts

Community Discussions

Trending Discussions on mobx
  • How to get the DOM element of an `observer` wrapped component?
  • Unable to display generated HTML ,from Showdown plugin, in React component
  • Observer not working with useLocalObservable
  • Use mobx and react get an error: Too many re-renders. React limits the number of renders to prevent an infinite loop
  • Runtime error appeared after updating to webpack 5. TypeError: Cannot read properties of undefined (reading 'default')
  • How to solve conflict between react-router-dom v6 and mobx?
  • Flutter mobx mobx_codegen generates null safety code for computed getters
  • Cannot read properties of undefined - javascript class
  • How use Mobx 6 storage with React 17?
  • NPM: Link peer dependency to package alias
Trending Discussions on mobx

QUESTION

How to get the DOM element of an `observer` wrapped component?

Asked 2022-Apr-11 at 19:13

I have defined my JSX components like this:

const ComponentA = observer(({state}) => {return <div></div>})

I am using observer from mobx: https://mobx.js.org/react-integration.html

I need to see what the rendered height is of the div by using the browser API for the DOM node. It will differ based on the contents it contains.

How do I do that?

ANSWER

Answered 2022-Apr-11 at 19:13

I'm sorry, I don't really understand what you're trying to get at. Perhaps this will help?

const divRef = useRef();

useEffect(() => {
  console.log(divRef.current.clientHeight);
}, []);

return <div ref={divRef}></div>

Source https://stackoverflow.com/questions/71832929

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install mobx

You can download it from GitHub.

Support

MobX cheat sheet (also sponsors the project)10 minute interactive introduction to MobX and ReactEgghead.io course, based on MobX 3

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Share this Page

share link
Consider Popular State Container Libraries
Compare State Container Libraries with Highest Support
Compare State Container Libraries with Highest Quality
Compare State Container Libraries with Highest Security
Compare State Container Libraries with Permissive License
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.