I'm currently writing a few components I want to open source and I always struggle to find the right way to bundle my components and logic so it can be easily imported in any React project.
I want to use React hooks and my current way of using tsc for it (I prefer Typescript) is not really working because React complains that React Hooks need to be used inside a function component (which they are, it seems TSC kicks out some of the context).
Are there any good resources for that or even boilerplates? Thank you already for your answers. Cheers to everyone contributing! I owe you.
You can use create-react-library. It also supports typescript.
Related
I'm new to react development. I'm currently using Typescript for react with webpack and npm.
i'm working on a large scale project where components are complex. As of now they are kept in certain hierachy in project folder.
i recently learn about making components library. I'm thinking of taking complex components out of project and put them in a separate component library. However, other team members say it would cauae headache to maintain library separately. since there is less to no chance of using this in any other project (thats the current situation) they should not take the components out and maintain separately.
i want to know if that is the only reason the react developers create component and creating component to test it better and simplifing thw project complexity are not the valid reasons?
First of all, thank you for reading and trying to understand this question.
In my team we have built a library for common Components with React for about 2+ years. This library is built with Babel creating two different transpilations. One in CommonJS for our Test Runner to run tests (because Jest cannot use ESM) and another one in ESM for Create React App (Webpack inside) to make Tree Shaking possible. We use Create React App to build and develop our Apps.
This is working for us perfectly. But we have encounter a problem when managing Final Form Peer Dependencies (or any other library). This is our scenario:
Common Components Library
PeerDependencies
Final Form
DevDependencies
Final Form
App1
Dependencies
Common Components Library
Final Form
App2
Dependencies
Common Components Library
Final Form
App3 (It dont use FinalForm but it uses other Common Components)
Dependencies
Common Components Library
I'll explain this:
In our Common Components Library, which I spoke earlier, we have React Components that works with Final Form, like for example a Vitaminated Autocomplete Text Input Component that we share among many Apps. This Apps also use Final Form to create Components that implement forms locally for that App.
So App1 is right. Everything works fine. But for one thing, now if we want to upgrade Final Form version for this App because, lets say, we need a bug fix of Final Form. We are been forced to upgrade also our Common Components Library and the other App's Final Form version. We need to do this if we want to avoid execution errors within the Final Form React Context. If you are familiar with Final Form or React Context in general you probably have encountered this problem. You can't use different versions of a library that uses React Context. i.e: if we have final-form#1.2.3 in our Common Components Library and final-form#1.2.4 in our App1 it would genereate an execution error. So as I said, we are forced to upgrade not only on App1 and Common Component Library also on the other Apps that uses a Common Component on the Library that uses Final Form. The statement would be: 'Now, if we upgrade somewhere we have to upgrade everywhere'. And we don't want to do that. Probably we aren't handleling dependencies correctly.
So this drove us to move Final Form dependencies (we also use react-final-form, final-form-arrays, etc...) to PeerDependencies. Our problem was solved. But now, another one appeared when we saw that in Apps like App3 we were having an error when we build our App3 with Create React App. This is our output when using npm run build:
module not found `react-final-form' in file 'node_modules/CommonComponentsLibrary/VitaminatedAutoCompleteTextInput.js'
This means that, even with our App not using this VitaminatedAutoCompleteTextInput when we build its checking for every import in the node_modules so this is making us unable to build our App3. When we add the 'missing' depednencies to our App this builds with no problem and then when analyzing our bundle with source-map-explorer we see that final form depdenencies are not included in the bundle.
Is this necessary? I felt like we are missing something here. One solution for us has been including final form depdnencies on the Common Components Library as 'normal' dependencies but we were still having the first problem I mentioned before.
Maybe this problem is not only related with Create React App or Final Form. This is probably a more global isse within ESModules Libraries with Npm dependencies. Probably you will need me to enchance the explanation or have questions. I'll be glad to improve this question where needed. I have also searched on Google and here to find a similar question but I only found this. I dont know exactlcy if it's the same question but It have no answer yet.
Many thanks for trying to help or understand this issue,
I know that after the emergence of React Hooks, functional components are able to act almost the same as the class components, and I have seen lately an encouragement wave to use functional components.
My question is, could it hurt in any means to have a hybrid react app with some functional components and some class components? I understand that react would not complain about it, but I am looking for an experienced best practices, did inconsistency with component's types cause any problems?
Any tips are appreciated.
After sometime of using a hybrid project, I came to the conclusion that it is better to use functional components for the whole project. Not for any technical reason, but because of the community support.
Many of the packages today are made with functional components only (or mostly) in mind, having class components may require an additional workarounds to make it work.
Some packages creates a short-hand hooks for easier usage, eventually it becomes the official supported way for using the package, like what happened with react-alert.
Personally, I have function components that don't manage state and class components that do. However, this is not mandatory. With React hooks you can do everything with functions. It is your choice, it won't impact performance much. Functional components can be more performant when used right. Read more here
For a while I've been using the react-tippy package, but it hasn't been updated in a long time and it has many bugs.
Recently #atomiks published a react wrapper for his tippy.js library.
I've used succesfully until I need to use it together with React-Router or Redux.
I've created a sandbox that replicates the issue ➡ https://codesandbox.io/s/9yr3rmrkny
Ideally somebody is able to figure out how to tweak the tippy.js wrapper to render the tippyInstance with Context (for both redux and react-router)
Actually Tippy has upgraded to v3 and they now have a really good support for react.
https://github.com/atomiks/tippy.js-react
This issue I posted is no longer an issue with the newer version and React Component
The problem is with the internals of how Tippy works, I.E. manipulating the DOM directly rather than going through the React provided virtual-dom. Due to this fact, it would be suggested to not use Tippy with React at all because it breaks the same rules as using jQuery with React. see here
Sadly, updating the wrapper wouldn't help anything as the DOM manipulation is happening within the Tippy source code, rather than the react wrapper.
What I ended up doing was rebuilding the Tippy functionality I needed in React.
There are also other tooltip libraries that are geared better for React that could be looked into.
I realize this isn't the most helpful answer, but wanted to share what I ran into, also thanks for asking this because it helped figure out what was causing my bug.
EDIT
as pointed out in previous answer, and comment. This is an issue with old version of tippy (v<3.0).
This is a newbie question that I have not found an answer to on the net. I would like to use this package in a react app. https://www.npmjs.com/package/zipcodes
I have only used react packages so far.
Yes, you can. Same way like with no-react. React community have a lot of plugins, made for react specially, but you have no limits to use any kind of library. Most of them are compatible or require wrapper creation, which will use library with it's imperative usage, but inside react component.