node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

ioc

ioc NPM Module

IoC library for React, with support for NextJS

Build

Notice of change of ownership: Starting version 1.0.0 this package has changed it's owner and goals. Previous version (0.1.0) is still available on npm via npm install ioc@0.1.0. Thank you.

Install

* Expects to be installed alongside React

yarn:

$ yarn add ioc

npm:

$ npm install --save ioc

Usage

Add provider at the top of your React app:

App.js

import React from 'react';
import { provide, types } from 'ioc';
import SharedComponent1 from './components/SharedComponent1';
import SharedLibrary from './lib/SharedLibrary';
 
@provide({
  @types.func.isRequired
  SharedComponent1,
 
  @types.object
  SharedLibrary
})
export default class App extends React.Component {
 
  constructor(props) {
    super(props);
    this.state = { ...state };
  }
 
  render() {
    return (
      // the app
    );
  }
}

Add consumer at the individual components:

node_modules/@my-components/SomeGenericComponent.js

import React from 'react';
import { inject, PropTypes } from 'ioc';
 
@inject({
  SharedComponent1: PropTypes.func.isRequired
})
export default class extends React.Component {
  render() {
    const { SharedComponent1 } = this.props;
 
    return (
      <div>
        Showing stuff:
        <SharedComponent1 some={} props={}>
         <a>Link Text</a>
        </SharedComponent1>
      </div>
    );
  }
}

Testing

Individual component testing is pretty simple, just provide your dependencies as props and add .dive() step to your shallow render, as with any High Order Component.

import { shallow } from 'enzyme';
import React from 'react';
import renderer from 'react-test-renderer';
 
import Component from './components/Component';
 
describe('With Enzyme', () => {
  it('Component renders with props', () => {
    // no need to SharedComponent1 Link component much for shallow rendering
    const injected = shallow(<Component SharedComponent1={() => {}} />);
    const component = injected.dive();
    expect(component.find('h1').text()).toEqual('My Component');
    expect(component.find('SharedComponent1').find('a').text()).toEqual('Link Text');
  });
});
 
describe('With Snapshot Testing', () => {
  it('Component renders with props', () => {
    const component = renderer.create(<Component SharedComponent1={(props) => <div comment="mocked SharedComponent1 component">{props.children}</div>} />);
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });
});

For more details check out tests.

License

IoC is released under the MIT license.