How to use mobx-react-lite - 10 common examples

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 mobxjs / mobx-react / src / observerClass.js View on Github external
function observerSCU(nextProps, nextState) {
    if (isUsingStaticRendering()) {
        console.warn(
            "[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side."
        )
    }
    // update on any state changes (as is the default)
    if (this.state !== nextState) {
        return true
    }
    // update if props are shallowly not equal, inspired by PureRenderMixin
    // we could return just 'false' here, and avoid the `skipRender` checks etc
    // however, it is nicer if lifecycle events are triggered like usually,
    // so we return true here if props are shallowly modified.
    return !shallowEqual(this.props, nextProps)
}
github wexond / desktop / src / renderer / views / newtab / components / NewsItem / index.tsx View on Github external
import * as React from 'react';
import { observer } from 'mobx-react-lite';

import {
  StyledNewsItem,
  Img,
  Info,
  Title,
  Footer,
  Source,
  Fill,
  Description,
} from './style';
import { INewsItem } from '~/interfaces/news-item';

export const NewsItem = observer(
  ({
    item,
    column,
    row,
    width,
    height,
  }: {
    item: INewsItem;
    column: number;
    row: number;
    width: number;
    height: number;
  }) => {
    // eslint-disable-next-line prefer-const
    let [img, setImg] = React.useState('');
github choerodon / devops-service / react / components / tree-view / index.js View on Github external
const children = record.children;

    if (children && children.length) {
      const key = record.get('key');
      expendedKeys.push(key);
      record.isExpanded = true;
    }

    const parent = record.parent;
    if (parent && !parent.isExpanded) {
      expandParents(parent, expendedKeys);
    }
  }
}

const TreeView = observer(({ ds, store, nodesRender, searchAble }) => {
  const treeClass = useMemo(() => classnames({
    'c7ncd-menu-wrap': true,
    'c7ncd-menu-scroll': searchAble,
  }), [searchAble]);

  const nodeRenderer = useCallback(({ record }) => nodesRender(record, store.getSearchValue),
    [store.getSearchValue]);

  function handleSearch(value) {
    const realValue = value || '';
    const expandedKeys = [];

    // NOTE: 让多个 action 只执行一次
    runInAction(() => {
      /**
       *
github molenzwiebel / Mimic / frontend / views / ChampionSelect.tsx View on Github external
export default function ChampionSelect() {
    return useObserver(() => {
        if (!champSelect.state) return null;

        return (
            <Container source={champSelect.interface.background}>
                <Timer />
                <Members />
                <PlayerSettings />

                {/* Absolute Positioned Elements */}
                <SpellPickerOverlay />
                <RuneEditorOverlay />
                <ChampionPickerOverlay />
                <BenchOverlay />
            </Container>
        );
    });
github molenzwiebel / Mimic / frontend / components / root / CreateLobby.tsx View on Github external
function SelectedSectionName() {
    // This can't be a text directly since the bottom border doesn't render on iOS.
    return useObserver(() => (
        <SectionNameContainer>
            <SectionNameText>{getGamemodeName(store.selectedSection).toUpperCase()}</SectionNameText>
        </SectionNameContainer>
    ));
}
github mobxjs / mobx-react / src / observerClass.js View on Github external
function makeComponentReactive(render) {
    if (isUsingStaticRendering() === true) return render.call(this)

    /**
     * If props are shallowly modified, react will render anyway,
     * so atom.reportChanged() should not result in yet another re-render
     */
    setHiddenProp(this, skipRenderKey, false)
    /**
     * forceUpdate will re-assign this.props. We don't want that to cause a loop,
     * so detect these changes
     */
    setHiddenProp(this, isForcingUpdateKey, false)

    // Generate friendly name for debugging
    const initialName =
        this.displayName ||
        this.name ||
github zeit / next.js / examples / with-mobx-react-lite / store.js View on Github external
import { action } from 'mobx'
import { useObservable, useStaticRendering } from 'mobx-react-lite'
import { createContext, useCallback } from 'react'

const isServer = typeof window === 'undefined'
// eslint-disable-next-line react-hooks/rules-of-hooks
useStaticRendering(isServer)

let StoreContext = createContext()
let start
let stop
let store

function initializeData(initialData = store || {}) {
  const { lastUpdate = Date.now(), light } = initialData
  return {
    lastUpdate,
    light: Boolean(light),
  }
}

function InjectStoreContext({ children, initialData }) {
  let timerInterval = null
github leebenson / reactql / src / entry / server.tsx View on Github external
// Class for handling Webpack stats output
import Output from "@/lib/output";

// Every byte sent back to the client is React; this is our main template
import Html from "@/views/ssr";

// ----------------------------------------------------------------------------

// Types
export interface IRouterContext {
  status?: number;
  url?: string;
}

// Enable SSR-mode with MobX to avoid memory leaks
useStaticRendering(true);

// Everything from this point will be Webpack'd and dumped in `dist/server.js`
// and then loaded into an active Koa server
export default function(output: Output) {
  // Create Koa middleware to handle React requests
  return async (ctx: Context) => {
    // Create a new Apollo client
    const client = createClient();

    // Create a fresh 'context' for React Router
    const routerContext: IRouterContext = {};

    // Render our components - passing down MobX state, a GraphQL client,
    // and a router for rendering based on our route config
    const components = (
      <ApolloProvider client={client}>
github choerodon / test-manager-service / react / routes / TestPlan / components / UpdateRemindModalChildren / UpdateRemindModalChildren.js View on Github external
</div>
      <div className={`${prefix}-updateContent`}>
        <span className={`${prefix}-updateContent-span`}>变更内容</span>
        <div className={`${prefix}-updateContent-div`}>
          <UpdateContent tag="old" updateData={{}} dataSet={oldStepTableDataSet} />
          <div className={`${prefix}-updateContent-div-icon`}>
            <Icon type="arrow_forward" />
          </div>
          <UpdateContent tag="new" updateData={{}} dataSet={newStepTableDataSet} />
        </div>
      </div>
    </div>
  );
}; 

export default observer(UpdateRemindModalChildren);
github TryCatchLearn / Reactivities / client-app / src / features / profiles / ProfilePage.tsx View on Github external
<Grid>
      <Grid.Column width={16}>
        <ProfileHeader
          profile={profile!}
          isCurrentUser={isCurrentUser}
          loading={loading}
          follow={follow}
          unfollow={unfollow}
        />
        <ProfileContent setActiveTab={setActiveTab} />
      </Grid.Column>
    </Grid>
  );
};

export default observer(ProfilePage);

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

Popular JavaScript code snippets

Find secure code to use in your application or website