unstated-props
A higher-order component that enables access to your unstated containers from
component props. No need to set up aProvider
orSubscribe
wrappers.
👋 Hi there!
unstated-props is an abstraction layer on
top of unstated by @jamiebuilds:
https://github.com/jamiebuilds/unstated
This is a higher-order component that enables access to your unstated containers from component props. No need to set up a Provider
or clunky Subscribe
wrappers. This one is a humble attempt to make a masterpiece like unstated
even better. ✨
🐣 < 990 bytes when used directly in the browser
⚛️ React / preact compatible (thanks to preact-compat)
Installation
To install the stable version:
npm install --save unstated-props
This assumes you are using npm
as your package manager.
Usage
Since unstated-props
is an extension on top of unstated
, we create Containers
as we would normally do.
It's recommended to put all of your containers into a single folder. Your application
structure would look similar to the following:
src/
app.jsx
components/
Button.jsx
Menu.jsx
...
containers/
PlaylistContainer.js
SettingsContainer.js
...
index.js
Step 1. Put unstated containers into "containers" folder
Your containers are the original unstated
containers:
// containers/PlaylistContainer.js// A good old unstated Container, simple and easy to read. ; state = shuffleMode: false ; shuffle = async { await this; console; // true }; ;
Step 2. Create index.js in the "containers" folder
Then you need to create the index.js
file in your containers/
folder.
This is a place where you import unstated-props
. You can organize it
in a way similar to this:
// containers/index.js// The major trick happens here. ;;; // "playlist" and "settings" will become available// through "this.props.containers" in your components playlist: PlaylistContainer settings: SettingsContainer;
Step 3. Set up the root component
Let's say that our demo app has the core component named App
.
This is the root of the whole thing.
We wrap it with a root flag:
// Root component "src/app.jsx".// TLDR: don't forget about the root flag! 😉 ;; const App = <div> Many different things will be added here </div> App root: true
Step 4. Use containers where needed
Now we can access containers from our components. It's really easy and the end result looks great:
// components/Menu.jsx ;; const Menu = <button onClick= { playlist }> Shuffle mode: playliststateshuffleMode </button> Menu;
That's it. Enjoy! ❤️
Feel free to star this repo and follow me on Twitter:
Related
- unstated - State so simple, it goes without saying
- unstated-debug - Debug your Unstated containers with ease
MIT License, 2019. Max Makarochkin