I'm currently working on a Project and we need to use a date-time picker component for react. We are currently using this one:
https://github.com/quri/react-bootstrap-datetimepicker
But we had an issue with it, forked it and tried to solve our problem. Here's the link of my fork:
https://github.com/fertaku/react-bootstrap-datetimepicker
Our problem right now is... how can I integrate this react component fork into my rails application using npm?
I've already seen a couple tutorials around and I've tried them.
They involved mainly using the repo URL in the package.json file and then executing npm install, but somehow it didn't work:
Error: Cannot find module 'react-bootstrap-datetimepicker'
Why the original version works with npm install but the fork doesn't? It looks like when I execute npm install with the fork url then the build is not complete or it just lack of some symbolic links or something.
As of today, you can also use this component which uses Bootstrap 4 styles: https://github.com/tonix-tuft/react-tempusdominus-bootstrap
"react-bootstrap-datetimepicker" repository is not maintained anymore and Depreciated, please refer to this fork : https://github.com/YouCanBookMe/react-datetime
You need to prefix the url with "github:" instead of "https:". It should look like this in your package.json
"react-bootstrap-datetimepicker": "github:fertaku/react-bootstrap-datetimepicker",
Related
I have a strange issue in my project, I have just seen that when I am trying to use a package from npm it simply does not work and shows this and that type of error.
I have tried to use a datepicker and it is showing me the following errors. Can anybody help, please?
I have used the component like this.
I am trying to use the save-svg-as-png library with my angular 7 project.
However, I cannot manage to get it to work. I have installed the library using
npm install --save save-svg-as-png
and I can see the library under node_modules.
Unfortunately, the library is an old-style javascript library and I do not know what I need to do in order to have access to it in my typescript components.
The readme refers to the Typings library for which type definitions apparently exist. However, the Typings page mentions that it is deprecated for TypeScript 2, so I did not pursue this.
Apparently there is #types/save-svg-as-png for native Angular 2+ support, but when I try to install it with
npm install --save #types/save-svg-as-png
the library cannot be found (npm ERR! code 404).
I googled some more and came across this issue on github where somebody has apparently got it working with Angular 2 by including it in the angular-cli.js file, but with the changes to Angular, this file no longer exists in version 7 and I do not know how that would need to be done nowadays.
I've also found the following article on how to integrate javascript libraries into Angular 2+, but most of it relies on #types being available (which they are not, see above) and only has a brief section on how to supply your own typings.d.ts file but after playing around for quite a while, I did not get any further. Is there a more detailed explanation showing how to use this approach?
I've also found this article on stackoverflow on how to integrate IIFE based libraries into typescript apps but did not get it working.
I've added the following line to my index.html file
<script type="javascript" src="node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>
but how do I now access the functions provided by the library? If I understood things correctly, they should now be available on the window object, but that does not seem to be the case.
I've also read this stackoverflow question on how to use non typescript libraries but one of my problems is that I don't even know into what namespace save-svg-as-png is being imported.
Has anyone managed to get this library working with an Angular 6/7 project and could give a detailed explanation on all steps required?
I'll try to summarise the solution as suggested by Hypenate:
Install the library:
npm install --save save-svg-as-png
At the top of my typescript file/angular component:
import * as svg from 'save-svg-as-png';
Using it in my angular component:
svg.svgAsPngUri(document.getElementById('idOfMySvgGraphic'), {}, (uri) => {
console.log('png base 64 encoded', uri);
});
All exported functions are available on svg.
Also, we can use the saveSvgAsPng.js file as an external js file instead of installing that package
Add saveSvgAsPng.js file into src/assets/js
And add this JavaScript file in scripts array in angular.json file
"scripts": [ "src/assets/js/saveSvgAsPng.js" ]
declare saveSvgAsPng in your component.ts
declare const saveSvgAsPng: any;
And call that when you need to download.
saveSVG(): void{ saveSvgAsPng(document.getElementById('id'), fileName); }
Make sure to restart your angular app (ng serve) if you change scripts array or declared name
Maybe this question is a bit off the rules. I'm using and npm package, which built in type definitions for TypeScript. Unfortunately there is a bug in the definitions, which I can easily fix.
I want to make this new version of the package available to my build server. First I thought I can just fork the repository on Github and add this repository as the source in my package.json, but then I realized that this package needs to be built.
So my question is, where should I go from here? Of course I've sent a pull request, but what can I do until this is merged and released? Should I clone the package and publish it by myself?
I just forked the repo and build it with my fix included.
Then i used my github-fork in the package json.
(you can use github links with branch or tag annotations)
As soon as the merge was made i switched back to the original package.
I had quite similar problem with buggy type definitions. The steps to fix an npm package and then use are:
fork the package
create a new fix branch,
fix the bug, push to your forked repo,
point to the repo in your package.json,
create a pull request to help package maintainers 💪
You can find more details here on my blog: https://www.kozubek.dev/2019/02/23/fixing-npm-package.html
Hope this helps!
I'm building a proprietary piece of software that utilizes this piece of software:
https://github.com/adazzle/react-data-grid
I need to fork this project to make custom modifications. It's fine that the project stays public, but my project is in a private repo. I'm using yarn instead of npm. My goal is to quickly make changes to react-data-grid, push them to github, and then pull those changes into my project so when I import react-data-grid and refresh, the new grid shows up.
There appears to be two ways to do this:
Use git submodules
Use yarn add but point it at my custom version of react-data-grid
I was wondering if anyone could provide the pros/cons of each approach, and if you suggest yarn , please explain the step-by-step process to do this.
Context
I'm using the aldeed:autoform package and found a couple bugs & filed PR for it(https://github.com/aldeed/meteor-autoform).
Aldeed being the only maintainer of a lot of popular packages ends up being the bottleneck for merging PR & following up with issues.
My solution was to fork his project & published my fork on atmosphere.
Naively, i just removed his package meteor remove aldeed:autoform and tried to add mine: meteor add metakungfu:autoform
When i load my app, i get the following error:
Package['aldeed:autoform'] returns the expected object, even though i removed the package.
For sake of completeness, i do use a bunch of other packages that depends on aldeed:autoform and my guess is that this is the reason why aldeed:autoform package is still present.
Questions:
What's the right way to use a fork of a package, when that package is dependency of other packages?
Is this the right way to solve my problem?
I've end up using mgp to manage the packages.
In order to solve my problem, i had to do two things:
First, add a git-packages.json in the root of your project that looks like this:
➜ cat git-packages.json
{
"aldeed:autoform": {
"git": "git#github.com:gregory/meteor-autoform.git",
"branch": "dev"
}
}
This will work locally, but if you deploy to heroku, the buildpack will need to install mgp & install the dependencies.
I just opened a PR to fix this
Fork all the dependencies and make them point to your fork.
Instead of publishing your own version of aldeed:autoform onto Atmosphere, you should rather use it as a local package, keeping its name intact. Meteor will look first for your local packages, before trying to fetch from Atmosphere.
That way, all your other packages that depend on it will use your local version.
To do that, see: Why does Meteor's aldeed/meteor-tabular package get stuck processing and never render a result?
Reference: Meteor Guide > Build > Writing Atmosphere Packages > Overriding packages with a local version