v1.4.0

New Features

Context based models with createContextModel() and IbizaProvider.

Wrap your component in the new IbizaProvider higher order component, and instead of createModel(), create your model with createContextModel() function. The model will automatically be given a unique name specific to the wrapped components in IbizaProvider.

const useModel = createContextModel(() => ({
  // Your model definition...
  name: 'Awesome!'
}))

const App = () => {
  return (
    <IbizaProvider>
      <MyComponent />
    </IbizaProvider>
  );
};

const MyComponent = () => {
  const model = useModel()

  return <h1>My model is {model.name}</h1>
};

Each instance of IbizaProvider will use its own state.

const useFirstModel = createContextModel(() => ({
  name: 'FIRST!'
}))

const useSecondModel = createContextModel(() => ({
  name: 'SECOND!'
}))

const App = () => {
  return (
    <>
      <IbizaProvider>
        <MyFirstComponent />
      </IbizaProvider>
      <IbizaProvider>
        <MySecondComponent />
      </IbizaProvider>
    </>
  );
};

const MyFirstComponent = () => {
  const model = useFirstModel();

  return <h1>My model is {model.name}</h1>; // My model is FIRST!
};

const MySecondComponent = () => {
  const model = useSecondModel()

  return <h1>My model is {model.name}</h1> // My model is SECOND!
};