[Solved]-What is the correct way of adding a dependency to react in your package.json for a react component-Reactjs

you can have react in either peerdependencies or in dependencies. the difference being that with a peerdependencies, react is only installed once for the package using your package. if you put it in dependencies, react will be installed twice, one time for the package using your package, and once time for your package.

react itself seems to favor peerdependencies for some reason. you obviously don't want two separate versions of react in your javascript bundle (which happens by default if you use dependencies), but that is easy to fix with npm dedupe.

so there's no correct way to do it, both peerdependencies and dependencies work. using dependencies is more in line with the node/npm way, but using peerdependencies is friendlier to users of your package that doesn't know about npm dedupe and why it's needed.

the selected answer is definitely the prescribed approach here however i've started favoring the use of inversion of control as opposed to relying on npm peer dependencies for my libraries dependencies and its served me well.

libraries are easier if you build them functional. it seems to be easier to maintain libraries that export a single function which takes in an object with all of their heavy dependencies and export an object containing each of your libraries typical exports.

library 'injected'

lib/index.js

export default ({ react }) => {
  const injectedcomponent = props => (
    <p style={{color: props.color}}>this component has no react npm dependencies.</p>
  )

  /** other stuff */

  return { injectedcomponent }
}

consuming app

app.js

import react from 'react'
import { render } from 'react-dom'

/** import the default export factory from our library */
import createinjectedcomponent from 'injected'

/** call the factory, passing its dependencies (guaranteed to match what we're bundling) and get back our component */
const { injectedcomponent } = createinjectedcomponent({ react })

render(<injectedcomponent color="blue" />, document.getelementbyid('root'))

if your component only works with a given version of react or some other dependency, you can write some assertions around the version for the react parameter that is passed in. overall, building libraries in this fashion should be less prone to new build issues appearing anytime version of react is published and will more importantly ensure that you are not causing your library consumers to bundle multiple versions of react and other heavy libraries. this pattern works well with npm link (i generally have 16+ libraries running from npm link simultaneous and experienced issues when i didn't use this pattern).

in your main app i would recommend always splitting out react, react dom and any react lib components you use into a vendor bundle (webpack) and mark it as external in your main bundle so that you do not unintentionally bundle two versions.