https://github.com/matinzd/use-mobx-selector

Mobx store selector utility for react
https://github.com/matinzd/use-mobx-selector

Last synced: about 1 month ago
JSON representation

Mobx store selector utility for react

• Host: GitHub
• URL: https://github.com/matinzd/use-mobx-selector
• Owner: matinzd
• Created: 2023-02-03T20:33:02.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-02-03T21:50:38.000Z (almost 2 years ago)
• Last Synced: 2024-10-06T01:35:12.444Z (about 1 month ago)
• Language: TypeScript
• Size: 107 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MobX Selector

A library that provides a hook to bind a MobX store to a React component.

## Installation

```

yarn add use-mobx-selector

```

## Usage

```javascript

import { makeAutoObservable } from "mobx";

import { useMobxSelector } from "use-mobx-selector";

class MobxStore {

    ids: string[] = []

    constructor() {

        makeAutoObservable(this)

    }

}

const store = new MobxStore()

const Component = (props) => {

  const isFooAvailable = useMobxSelector(store, (store) => store.ids.includes('foo'));

  return (

    


      {isFooAvailable}

    

  );

};

```


## API

`useMobxSelector(store, selector, equalityFn?)`

A hook that binds the `store` to the component and re-renders the component when the result of the `selector` function changes.

### Arguments

- `store`: A MobX store object.

- `selector`: A function that takes the store as an argument and returns the selected data.

- `equalityFn` (optional): A function that takes the previous selected data and the next selected data, and returns true if they are equal. If not provided, it will use reference equality.

### Returns

The selected data returned from the selector function.

## License

MIT.