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!
};