@lxsmnsyc/react-provider
v0.5.7
Published
Flutter's Depedency Injection pattern for React
Downloads
13
Readme
react-provider
Flutter's Depedency Injection pattern for React
Install
npm install --save @lxsmnsyc/react-provider
Examples
Basic
import React from 'react'
import { Provider, Consumer } from 'react-provider'
export default function App() {
return (
<Provider of="A" value="Hello World">
<Consumer of="A" builder={x => <h1>{x}</h1>} />
</Provider>
)
}
Nested using filters
import React from 'react'
import { Provider, Consumer } from 'react-provider'
export default function App() {
return (
<Provider value="Hello World">
<Provider value="Hello Alexis">
<Consumer
of={x => typeof x === 'string'}
builder={x => <h1>{x}</h1>}
/>
</Provider>
<Consumer
of={x => typeof x === 'string'}
builder={x => <h1>{x}</h1>}
/>
</Provider>
)
}
Promise
import React from 'react'
import { PromiseProvider, PromiseConsumer } from 'react-provider';
export default function App() {
return (
<PromiseProvider of="Test" value={Promise.resolve('Hello World')}>
<PromiseConsumer
of="Test"
onDefault={() => <h1>Default</h1>}
onSuccess={x => <h1>{x}</h1>}
onFailure={x => <h1>{x.message}</h1>}
onLoading={() => <h1>Loading...</h1>}
/>
</PromiseProvider>
)
}
ChangeNotifier
import React, { useCallback } from 'react'
import { useChangeNotifierProvider, ChangeNotifierProvider, ChangeNotifierConsumer, ChangeNotifier } from 'react-provider'
class CounterModel extends ChangeNotifier {
constructor() {
super();
this.count = 0;
}
increment() {
this.count++;
this.notifyListeners();
}
decrement() {
this.count--;
this.notifyListeners();
}
}
function Increment() {
const notifier = useChangeNotifierProvider('Test', false);
const onClick = useCallback(() => notifier.increment(), [ notifier ]);
return (
<button type="button" onClick={onClick}>Increment!</button>
)
}
function Decrement() {
const notifier = useChangeNotifierProvider('Test', false);
const onClick = useCallback(() => notifier.decrement(), [ notifier ]);
return (
<button type="button" onClick={onClick}>Decrement!</button>
)
}
export default function App() {
return (
<ChangeNotifierProvider of="Test" value={new CounterModel()}>
<ChangeNotifierConsumer
of="Test"
builder={model => <h1>{model.count}</h1>}
/>
<Increment />
<Decrement />
</ChangeNotifierProvider>
)
}
Composing multiple Providers
import React from 'react'
import { MultiProvider, Consumer, Provider } from 'react-provider'
export default function App() {
return (
<MultiProvider
providers={[
<Provider of="A" value="Hello World" />,
<Provider of="B" value="Hello Alexis" />,
<Provider of="C" value="Hello Lyon" />,
]}
>
<Consumer of="A" builder={x => <h1>{x}</h1>} />
<Consumer of="B" builder={x => <h1>{x}</h1>} />
<Consumer of="C" builder={x => <h1>{x}</h1>} />
</MultiProvider>
)
}
License
MIT © LXSMNSYC