falcor-react-toolkit

falcor for react hooks

• react >= 16.8.0

usage

FalcorProvider

import React from 'react';
import Falcor from 'falcor';
import { FalcorProvider } from 'falcor-react-toolkit';

const model = new Falcor.Model({
  cache: {
    foo: 'bar',
    todos: [
      { name: 'get milk from corner store' },
      { name: 'withdraw money from ATM' },
    ]
  }
});

return (
  <FalcorProvider model={model}>
    <App />
  </FalcorProvider>
)

useFalcor hooks

import React from 'react';
import { useFalcor } from 'falcor-react-toolkit';

const App = (props) => {
  const path = ['foo'];
  const { loading, error, data } = useFalcor(path);

  return (
    <div>
      {loading && <span>Now Loading...</span>}
      {!loading && (
        <div>
          {data.foo}
        </div>
      )}
    </div>
  )
};

useFalcor with normalizer

import React from 'react';
import { useFalcor } from 'falcor-react-toolkit';

const App = (props) => {
  const path = ['todos', { from: 0, to: 10 }, ['name']];
  const normalizer = (json) => {
    return Object.entries(json.todos)
    .filter(([key, _]) => key !== '$__path')
    .map(([_, val]) => val);
  };
  const { loading, error, data } = useFalcor(path, { normalizer });

  return (
      <div>
      {loading && <span>Now Loading...</span>}
      {!loading && (
        <div>
          {data.map(value => <div>{value.name}</div>)}
        </div>
       )}
      </div>
      )
};

useFalcor with batchModel

import React from 'react';
import { useFalcor } from 'falcor-react-toolkit';

const App = (props) => {
  const path = ['foo'];
  const batch = {key: 'default-batch-model', delay: 100};
  const { loading, error, data } = useFalcor(path, { batch });

  return (
      <div>
      {loading && <span>Now Loading...</span>}
      {!loading && (
          <div>
          {data.foo}
          </div>
          )}
      </div>
      )
};

useFalcorModel

import React from 'react';
import { useFalcorModel } from 'falcor-react-toolkit';

const App = (props) => {
  const model = useFalcorModel();
  ...
}