https://github.com/cult-of-coders/react-molecule
Molecule is a light-weight framework that lets you reason about inter-component communication, dependency injection and logic decoupling.
https://github.com/cult-of-coders/react-molecule
dependency-injection flux react reactjs
Last synced: 5 months ago
JSON representation
Molecule is a light-weight framework that lets you reason about inter-component communication, dependency injection and logic decoupling.
- Host: GitHub
- URL: https://github.com/cult-of-coders/react-molecule
- Owner: cult-of-coders
- License: mit
- Created: 2018-06-20T10:08:54.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-10-14T07:36:45.000Z (over 5 years ago)
- Last Synced: 2024-04-24T20:14:50.574Z (12 months ago)
- Topics: dependency-injection, flux, react, reactjs
- Language: TypeScript
- Homepage:
- Size: 75.2 KB
- Stars: 33
- Watchers: 8
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Molecule
[](https://travis-ci.org/cult-of-coders/react-molecule)
[](https://coveralls.io/github/cult-of-coders/react-molecule?branch=master)
[](https://github.com/prettier/prettier)
Molecule has been built to allow creation of smart, hackable react libraries. Molecule is esentially a smart context object that allows you to do the following:
- Handles listening, and emissions of events
- Can encapsulate logic to allow easy testing and dependency injection
- Enables component overriding via registry
- Ability to manage a reactive store, isolated from your components
An example where `react-molecule` has been efficiently used is here: https://www.npmjs.com/package/easify
## Install
`npm install --save react-molecule`
```js
import { molecule, useMolecule } from "react-molecule";
const Page = molecule()(PageComponent);
const PageComponent = () => {
const molecule = useMolecule();
// Use it
};
```
## Example
Molecule's flexibility is extreme. There are lots of way you can use it. Below we explore an example, where we have a list, and we want to refresh the list when clicking a button.
```jsx
import { Agent } from "react-molecule";
// You define logic in Agents
class InvoiceLoader extends Agent {
// This runs when the molecule is firstly initialised
init() {
this.loadInvoices();
}
loadInvoices() {
const { store } = this.molecule;
loadInvoiceQuery().then(result => {
store.invoices = result;
});
}
}
```
```jsx
import { molecule, useStore, useAgent } from "react-molecule";
import { observable } from "mobx";
import { observer } from "mobx-react";
// This initialises the molecule by injecting agents, and a reactive store
const InvoiceListPage = molecule(props => {
return {
agents: {
// We want to have a single instance of Agent that can be configured
invoiceLoader: InvoiceLoader.factory()
},
store: observable({
invoices: []
})
};
})(InvoiceList);
const InvoiceList = observer(() => {
// We can access the molecule's store directly
const { invoices } = useStore();
// We can also get access to the agents
const invoiceLoader = useAgent("invoiceLoader");
return (
-
invoiceLoader.loadInvoices()}>Refresh
{invoices.map(invoice => {
;
})}
);
});
```
What do we gain exactly using this approach?
- By isolating logic inside agents, testing `React components` logic transforms into testing `Agents`
- We have a way to store reactive data, in which multiple agents can work together
This is just scratching the surface, let's explore more in the documentation.
## [Documentation](./docs/index.md)
[Start reading the documentation](./docs/index.md) then use the [API](./docs/API.md) for reference.
## [API](./docs/API.md)
After you read the documentation you can use the API for reference:
[Click here to read it](./docs/API.md)
## Support
Feel free to contact us at [email protected]