CODEWITHSUNDEEP
javascriptreactjsnpmreduxcomponents
Alex
Alex

Reputation: 2780

How to manage custom aspects of a React component (Redux, CSS) whilst distributing via NPM

Question: How are custom Redux containers and CSS normally handled through NPM?
 The below structure doesn't work well with traditional package distribution platforms such as NPM as I need to edit the custom files such as the Redux container and the CSS in different projects.

Given that I have many components in a custom React component library with the following structure and files:

> Component root dir
 > Component.js
 > Component.css 
 > Component_container.js
 > Component_custom.css

For example:

App.js   
  => Component_1_container.js   
    => Component_1.js   
      => Component_2_container.js
        => Component_2.js


This is great in that it allows me to separate out custom code from the shared code, I can update Component.js and Component.css in many projects without touching the code in the custom files. However the custom container and CSS files can't be managed through NPM.

I can easily see how the CSS could be extracted into a separate folder. The Redux containers are harder because they are referenced by other components as dependencies as in the above structure. Moving them out of NPM and into another project folder would make references between components difficult to manage.

Upvotes: 4

Views: 202

Answers (2)

Alex
Alex

Reputation: 2780

Having been through quite a guides and example repos, it seems that the best approach to this is to have just a few container elements sitting at a higher level controlling many related components.

I felt it was a decent idea for each component to have individual access to the store with its own container and which could change from project to project, but it is an unmanageable solution.

The main takeaway here is that presentational components should never call container components as a dependency.

Having separated out container and custom style files from the component directory, it is straightforward enough to then create NPM components which contain only the reusable code.

The question is how many containers to use in an app, here is a good summary of how to grouped components against containers which I found useful in answering this question: http://www.thegreatcodeadventure.com/the-react-plus-redux-container-pattern/

Upvotes: 0

Vitalik Teremasov
Vitalik Teremasov

Reputation: 658

I was thinking of very similar issue and I think you could create a separate module (no matter npm module or just a folder in you're project marked as a module) named ui-kit and all components there will be Redux free, since the client of this components can use other store or work with out any.

Also, you're gonna have folder component or something you have now and your high-level component(App.js) will know only about your component which will know about ui-kit

Structure:

app
  -> Components (containers)
    -> Component.js
    -> Component.css
  -> ui-kit (Redux free components)
    -> Component.js
    -> Component.css
  App.js (High-level component)

Upvotes: 2

Related Questions