How to use the mobx-react-lite.useObservable function in mobx-react-lite

To help you get started, we’ve selected a few mobx-react-lite 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 leebenson / reactql / src / components / example / count.tsx View on Github external
export const Count: React.FunctionComponent = () => {
  const store = useObservable({ count: 0 });
  return (
    <>
      
        {() =&gt; <h3>Current count (from MobX): {store.count}</h3>}
      
      <button> store.count++}&gt;Increment</button>
      <button> (store.count = 0)}&gt;Reset</button>
    
  );
};
github zeit / next.js / examples / with-mobx-react-lite / store.js View on Github external
function InjectStoreContext({ children, initialData }) {
  let timerInterval = null
  store = useObservable(initializeData(initialData))

  start = useCallback(
    action(() => {
      timerInterval = setInterval(() => {
        store.lastUpdate = Date.now()
        store.light = true
      }, 1000)
    })
  )

  stop = () => {
    if (timerInterval) {
      clearInterval(timerInterval)
    }
  }
github CodeRabbitYu / ShiTu / app / pages / News / BuDeJie / index.js View on Github external
const BuDeJie = observer(function(props: Props) {
  const { navigation, type } = props;
  const buDeJieMobx = useObservable(new BuDeJieMobx());
  const { largeListData, maxtime = '', fetchBuDeJieData } = buDeJieMobx;

  const waterfallRef: WaterfallList = useRef();
  const customOverlayRef: Overlay = useRef();

  useEffect(() => {
    fetchBuDeJieData(type, '');
  }, []);

  function picturePress(item: Picture, props: Props) {
    if (item.isLongPicture || !item.is_gif) {
      navigation.navigate('WebView', { uri: item.weixin_url });
    } else {

      const height = isIPhoneX ? SCREEN_HEIGHT - 44 - 49 : SCREEN_HEIGHT;
github stasilo / retrace.gl / src / ui / components / controls / render-controls / index.js View on Github external
const RenderControls = observer(() =&gt; {
    let store = getStore();

    let state = useObservable({
        maxSampleCount: store.currentMaxSampleCount,
        setMaxSampleCount(val) {
            state.maxSampleCount = val;
        }
    });

    reaction(
        () =&gt; store.currentMaxSampleCount,
        c =&gt; state.setMaxSampleCount(c)
    );

    return (
        <div>
            <form> {
                    e.preventDefault();                    </form></div>
github isaacy-125 / KnowledgeManage / react-hook / hook-demo / src / Mobx / index.js View on Github external
const App = observer(() => {
  const store = useObservable({
    todos: [
      { id: 1, text: 'Buy eggs', completed: true },
      { id: 2, text: 'Write a post', completed: false }
    ],
    toggleTodo(index) {
      store.todos[index].completed = !store.todos[index]
        .completed;
        store.todos = JSON.parse(JSON.stringify(store.todos));
    },
    get getTodos() {
      return store.todos;
    },
    get getCompletedLen() {
        return store.todos.filter(t => t.completed).length;
    }
  })

mobx-react-lite

Lightweight React bindings for MobX based on React 16.8+ and Hooks

MIT
Latest version published 7 months ago

Package Health Score

96 / 100
Full package analysis