
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
react-simple-di
Advanced tools
Simple dependancy injection solution for React.
npm i react-simple-di
In react-simple-di
, we've two types of dependencies, they are:
Every action will receive the
context
as it's first argument.
First, we need to inject dependencies to a root level React component. Mostly, this will be the main layout component of our app.
Here are our dependencies:
const context = {
DB,
Router,
appName: 'My Blog'
};
const actions = {
posts: {
create({DB, Router}, title, content) {
const id = String(Math.random());
DB.createPost(id, title, content);
Router.go(`/post/${id}`);
}
}
};
First we've defined our context. Then, we have our actions. Here actions must follow a structure like mentioned above.
Let's inject our dependencies:
import {injectDeps} from 'react-simple-di';
import Layout from './layout.jsx';
// Above mentioned actions and context are defined here.
const LayoutWithDeps = injectDeps(context, actions)(Layout);
Now you can use LayoutWithDeps
anywhere in your app.
Any component rendered inside LayoutWithDeps
can access both context and actions.
When using dependecies it will compose a new React component and pass dependencies via props to the original component.
First let's create our UI component. Here it will expect dependecies to come via props appName
and createPost
.
class CreatePost extends React.Component {
render() {
const {appName} = this.props;
return (
<div>
Create a blog post on app: ${appName}. <br/>
<button onClick={this.create.bind(this)}>Create Now</button>
</div>
);
}
create() {
const {createPost} = this.props;
createPost('My Blog Title', 'Some Content');
}
}
So, let's use dependencies:
const {useDeps} from 'react-simple-di';
// Assume above mentioned CreatePost react component is
// defined here.
const depsToPropsMapper = (context, actions) => ({
appName: context.appName,
createPost: actions.posts.create
});
const CreatePostWithDeps = useDeps(depsToPropsMapper)(CreatePost);
That's it.
Note: Here when calling the
actions.posts.create
action, you don't need to provide the context as the first argument. It'll handle byreact-simple-di
.
Default Mapper
If you didn't provide a mapper function, useDeps will use a default mapper function will allows you to get context and props directy. Here's that default mapper:
const mapper = (context, actions) => ({
context: () => context,
actions: () => actions
});
v1.2.0
FAQs
Simple Dependancy Injection Solution for React
The npm package react-simple-di receives a total of 6,014 weekly downloads. As such, react-simple-di popularity was classified as popular.
We found that react-simple-di demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.