Issue in extending PaperRenderer about react-paperjs

[psychobolt]

MyCustomStencilComponent is just alias for a constant string variable that you define in your renderer. For example, in the reference above I could use TYPE_NAME in the App component.

import MyCustomStencil from './MyCustomStencil';

const TYPE_NAME = 'myStencil';

class MyPaperRenderer extends PaperRenderer {
  getInstanceFactory() {
    return { 
      ...this.defaultTypes, /* 
        refer to default types
        see https://github.com/psychobolt/react-paperjs/blob/master/src/Paper.types.js#L42 
      */
      [TYPE_NAME]: (props, paper) => new MyCustomStencil(props),
    };
  }
}

const App = (props) => (
   <PaperContainer renderer={MyPaperRenderer}>
     <TYPE_NAME />
   </PaperContainer>
);

You can look at the reference, and see there is a link to default types.

Below is additional info, not pertaining to your original question but helpful to the docs.

There is no specific structure for the class MyCustomStencil, but its expected you composite it so it extends Paper's prototypes such as from Item or Group. Then the raster is instantiated and have proper methods to append to the tree for during react-paperjs' reconciler's lifecycle. (see host config). However, if you need further advanced customization, lucky enough you already have access to extend the renderer's host config.

[im-hamza-dev]

Oh, Thanks a lot @psychobolt , I was close and now issue resolved
Successfully extended.

[psychobolt]

@im-hamza-dev No problem, I just merged a related PR. There is a new version (1.0.3) out now with these changes.