Reuse react component with functionality changes

Question

I'm developing a common npm package with React's components for later usages in several projects. I've got default snackbar components and one wrapper component that will return a certain snackbar depending on snackbar's type provided to the wrapper's props. Here is my snackbar wrapper's code:

const TYPES = {
  [SNACKBAR_TYPES.SUCCESS]: SnackbarSuccess,
  [SNACKBAR_TYPES.ERROR]: SnackbarError,
  [SNACKBAR_TYPES.INFO]: SnackbarInfo,
  [SNACKBAR_TYPES.LOADING]: SnackbarLoading
}

const CustomSnackbars = props => {
  const CustomSnackbar = TYPES[props.snackbarType]

  if (!CustomSnackbar) {
    console.log('Invalid snackbar type was provided')
    return null
  }

  return (
    <CustomSnackbar {...props} />
  )
}

This wrapper will be used in projects for creating CustomSnackbars container. But here comes one problem that every project will probably define it's own snackbars with it's own snackbar type. And I don't want to put every snackbar that I will have later in my projects to my common module. Is it possible to somehow extend CustomSnackbars wrapper from the each projects's side, so this wrapper will have specific to each project's snackbar types in addition to default snackbar types?

lavor · Accepted Answer · 2019-11-29 09:57:58Z

Try to pass your additional TYPES by props:

CustomSnackbars.js (in common library)

const TYPES = {
  [SNACKBAR_TYPES.SUCCESS]: SnackbarSuccess,
  [SNACKBAR_TYPES.ERROR]: SnackbarError,
  [SNACKBAR_TYPES.INFO]: SnackbarInfo,
  [SNACKBAR_TYPES.LOADING]: SnackbarLoading
}

const CustomSnackbars = props => {
  const enhancedTypes = {...TYPES, ...props.userDefinedTypes};
  const CustomSnackbar = enhancedTypes[props.snackbarType]

  if (!CustomSnackbar) {
    console.log('Invalid snackbar type was provided')
    return null
  }

  return (
    <CustomSnackbar {...props} />
  )
}

Moreover, if you do not want to pass these userDefinedTypes to props in every instance of CustomSnackbars in your consumer project, you can create project specific CustomSnackbars, which will just render your common CustomSnackbars with userDefinedTypes in props.

ProjectSpecificCustomSnackbars.js (in your project)

const PROJECT_SPECIFIC_TYPES = {
  [SNACKBAR_TYPES.PROJECT_SUCCESS]: SnackbarProjectSuccess,
  [SNACKBAR_TYPES.PROJECT_INFO]: SnackbarProjectInfo
}

const ProjectSpecificCustomSnackbars = props => (
  <CustomSnackbars {...props} userDefinedTypes={PROJECT_SPECIFIC_TYPES} />
)

Collectives™ on Stack Overflow

Reuse react component with functionality changes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related