{"id":17103360,"url":"https://github.com/farwayer/mobx-select","last_synced_at":"2025-03-23T19:43:38.829Z","repository":{"id":56602378,"uuid":"211964038","full_name":"farwayer/mobx-select","owner":"farwayer","description":"MobX and MobX-State-Tree store selector for using with mobx-react-lite","archived":false,"fork":false,"pushed_at":"2021-04-06T17:01:10.000Z","size":893,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-02T18:21:10.077Z","etag":null,"topics":["inject","mobs-state-tree","mobx","mobx-react","mobx-react-lite","observer","select","selector","store"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/farwayer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-30T21:51:32.000Z","updated_at":"2022-05-04T09:55:45.000Z","dependencies_parsed_at":"2022-08-15T21:40:51.589Z","dependency_job_id":null,"html_url":"https://github.com/farwayer/mobx-select","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farwayer%2Fmobx-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farwayer%2Fmobx-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farwayer%2Fmobx-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farwayer%2Fmobx-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/farwayer","download_url":"https://codeload.github.com/farwayer/mobx-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245162094,"owners_count":20570691,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inject","mobs-state-tree","mobx","mobx-react","mobx-react-lite","observer","select","selector","store"],"created_at":"2024-10-14T15:33:09.870Z","updated_at":"2025-03-23T19:43:38.802Z","avatar_url":"https://github.com/farwayer.png","language":"JavaScript","readme":"## mobx-select\n\n_MobX and MobX-State-Tree store selectors\n(like Redux `mapStateToProps` and `mapDispatchToProps`)\nfor using with [mobx-react-lite](https://github.com/mobxjs/mobx-react-lite)_\n\n[![NPM version](https://img.shields.io/npm/v/mobx-select.svg)](https://www.npmjs.com/package/mobx-select)\n\nLib has no deps and tiny. Its size [limited](https://github.com/ai/size-limit)\nto **814 bytes** (minified and gzipped).\n\n## How to use\n\n```bash\nyarn add mobx-select\n```\n\n**asset.js**\n```js\nimport {select} from 'mobx-select'\n\nfunction getAsset(app, props) {\n  const asset = app.assets.get(props.id)\n  return {asset}\n}\n\nfunction onRemoveAsset(app, prop) {\n  const {id} = props\n  \n  const onRemove = useCallback(() =\u003e {\n    app.removeAsset(id)\n  }, [id])\n\n  return {onRemove}\n}\n\nexport default select(\n  Asset,\n  getAsset,\n  onRemoveAsset,\n  // ...other\n)\n\nfunction Asset({\n  asset = {},\n  onRemove,\n}) {\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003e{asset.name}\u003c/span\u003e\n      \u003cbutton onClick={onRemove}\u003eRemove\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n**app.js**\n```js\nimport {StoreProvider} from 'mobx-select'\nimport Asset from './asset'\n\n// create MobX or MobX-State-Tree store\nconst app = createStore()\n\nexport default function App() {\n  return (\n    \u003cStoreProvider value={app}\u003e\n      \u003cAsset id='1'/\u003e\n    \u003c/StoreProvider\u003e\n  )\n}\n```\n\n## Render optimization\n\nIf you access nested observable values (MobX objects, maps, arrays) only inside\nselectors but not in component you can use `memo` or `PureComponent`\nto prevent unnecessary extra renderings.\n\n```js\nimport {memo} from 'react'\n\nfunction getAssetTitle(app, props) {\n  const title = app.assets.get(props.id)?.title\n  return {title}\n}\n\nexport default select(\n  memo(Title),\n  getAssetTitle,\n)\n\nfunction Title({\n  title,\n}) {\n  return (\n    \u003cspan\u003e{title}\u003c/span\u003e\n  )\n}\n```\n\n## Using with non-function components\n\nYou can use `select()` with non-function components. But keep in mind that\naccess to all nested observable values (MobX objects, maps, arrays) inside\ncomponent will not be tracked. So you need to get all necessary fields in\nselector and pass it as **(!)** scalar values.\n\nUse `warnNonFunction: false` option to hide warning about it. Warning for `memo`\nand `PureComponent` will be omitted automatically (assumed that you know what\nyou're doing). \n\n```js\nfunction getUserId(app) {\n  const userId = app.userId\n  return {userId}\n}\n\nexport default select(\n  Title,\n  getAsset,\n  getUserId,\n{warnNonFunction: false})\n\nclass Title extends React.Component {\n  render() {\n    const {userId, asset} = this.props\n\n    // (!) WARN: access to price will not be tracked!\n    // (!) changing its value will not trigger component re-render \n    const price = asset?.price\n\n    return (\n      \u003cspan\u003euser={userId} {price}\u003c/span\u003e\n    )\n  }\n}\n```\n\n## References\n\nReferences will be automatically passed to components:\n\n```js\nfunction UserName({\n  name,\n}, ref) {\n  return (\n    \u003cinput ref={ref} value={name}/\u003e\n  )\n}\n\nclass UserSignInCount extends React.Component {\n  render() {\n    return (\n      \u003cspan\u003e{this.props.count}\u003c/span\u003e\n    )\n  }\n  \n  log() {\n    console.log(this.props.count)\n  }\n}\n\nfunction App() {\n  const nameRef = useRef()\n  const signInCountRef = useRef()\n  \n  const tadam = useCallback(() =\u003e {\n    nameRef.current.value = \"User TADAM!\"\n    signInCountRef.current.log()\n  })\n  \n  return (\n    \u003c\u003e\n      \u003cUserName ref={nameRef}/\u003e\n      \u003cUserSignInCount ref={signInCountRef}/\u003e\n      \u003cbutton onClick={tadam}\u003eTADAM!\u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarwayer%2Fmobx-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffarwayer%2Fmobx-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarwayer%2Fmobx-select/lists"}