Nested Parenthetical Madness
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    iocpublic

    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.

    Keywords

    none

    install

    npm i ioc

    Downloadsweekly downloads

    62

    version

    1.0.3

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar