I am using icons from #material-ui/icons in my React projects and I need to extend it with a set of custom icons. I would like to provide this set as a shared package available via a private NPM repository, the same way material-ui icons are provided. What is the best approach to do this?
I found this blog post:
http://nicolasgallagher.com/making-svg-icon-libraries-for-react-apps/
The author uses scripts similar to the material-ui/icons scripts to generate .js/.d.ts from .svg, and reproduce what their build is doing. Is that the correct way?
I saw that the builder script of material-ui/icons accepts an argument for the path where the .svg are located, and it makes me wonder if I shouldn't use this somehow.
If you are building packages of icons for react apps, can you comment on how you are building them?
Best regards
Related
I created a React component and uploaded it to a private git repo. It's a fairly simple component that renders a data table that can be sorted etc. I used nwb to for the setup / build process (https://github.com/insin/nwb).
It's not published on npm, so when I want to use it on a project I install via something like npm install --save git+ssh://git#github.com/Me/myRepo.git. This all works fine in normal React projects.
Unfortunately on a NextJS site I'm working on, NextJS won't compile, and is giving the error CSS Modules cannot be imported from within node_modules and linking me to https://nextjs.org/docs/messages/css-modules-npm
That page suggests that I might be accidentally using the package's source files - but I'm not. When I look in my /node_modules/myComponent/ folder, there's a /lib/ folder that has the compiled source. However, the styles are still in separate files and are included into the compiled source just like you might normally do (var _defaultModule = _interopRequireDefault(require("./styles/default.module.scss"));).
I did some searching online and it seems like the "quick and easy" solution is to use https://github.com/martpie/next-transpile-modules.
I'd prefer to solve this by fixing my repo though, so that when I install it on a project (whether NextJS or whatever) I get whatever it is that NextJS wants.
So my various questions are:
Is there a way to set up my repo so NextJS is happy with it?
Is nwb not the preferred way to make a React component? Should I have used some other process? I'm not having this problem with any other component, so it seems like this is something I did wrong with my repo.
Basically I want to
Have MaterialUI as the base package (#material-ui/core)
Customize all or the required components as per my branding and style guide and generate my own component library as NPM package. (customize #material-ui/core and create own package like #myorg/core)
Use those custom components in my project by installing the NPM package & importing. (npm install #myorg/core and import 'button' from '#myorg/core/button')
Because I want to create a common component library for different react applications.
Please let me know if that makes sense.
Of course you can.
Creating a package is possible and even recommended if you want to reuse it in different applications or publish it.
Most of the packages are using another packages (called dependencies) and sometimes building new components on top of these packages' components. You can read more about dependencies here..
Packages with MIT License allows Modification as well.
More information about creating NodeJS modules can be found here.
And finally, if you are willing to publish the package in NPM, follow this.
I do have some components I use across my projects so I thought it was a good idea to build my own React UI lib, but how?
Do I create a SPA using CRA and start coding and listing the components on it?
Yep, it’s one way to start.
But if you want to publish it or organize it to have a better use of it, I suggest you use Storybook as your dev environment and Jest + ESlint.
There’s some boilerplates like React AZap to help you with that.
I built React AZap to be an easy to use React UI lib boilerplate.
It uses Storybook and stories to organize your components, it has a component generator using Plop, tests with Jest+Enzime and styles with styled-components.
Try it out, it can save you time to start your lib ;)
Using CRA won't help you, as you won't be running this project.
Creating a library of components is the same as creating any other npm package, the only difference is that it should export components instead of normal functions/objects.
There are plenty of guides online that you can consult if you want more in-depth explanation.
I'd recommend giving this guide a read, which goes into the details for how to structure a multi-package UI component library. The code is included as well, so you should be able to clone to repository and get started.
Hope that helps!
I want to use my UI components as a reusable seperate repo/project for my react-native iniit App.
So i creatd a seperate project folder like this
and installed these dependencies
and few dependencies externally with my other app.
Then i used
yarn link
to link this project to my working app as a module just like a node module. but i get this error when i try to run my app?
Is there an issue with my method, or is there a sure way i can try to reach my goal because i found multiple ways and various configuration of creating such component libraries.but i didn't use any since the end goal is different.
This is a known issue with the React Native packager. See this discussion: https://github.com/facebook/react-native/issues/637.
This may have to do with using watchman, although there seem to be a few different cases where this can crop up.
TL;DR: React Native packager does not respect symlinks to projects, so npm and yarn link do not work like you would expect them to. Apparently this is being resolved in metro-bundler: https://github.com/facebook/metro-bundler/issues/1.
Unfortunately the workarounds are not that pretty, but there are a few options discussed in the issue 637 discussion. It also looks like you may be using a github repo for your package.
You could tell npm to get your library from github via your project's package.json, so you probably do not need npm link, though you will not be able to link to your local files for your module this way.
I've been playing with React.js for a while and I'm starting to build up a small number of my own components.
What is the approved way of packaging them up into something I can import into different projects?
At the moment, I'm cutting and pasting the actual file around, which is clearly bad. In .NET I would create a new .dll and import that. Publishing a npm package doesn't feel right, although I don't know why.
Create a git repository with your components and reference that repo in your package.json like:
"package-name": "git+ssh://git#github.com/<user>/<repo>.git"