I am new to React. I try to use the npm module overlapping-marker-spiderfier-leaflet in a react project.
I follow the instruction at https://www.npmjs.com/package/overlapping-marker-spiderfier-leaflet so I do npm install -S overlapping-marker-spiderfier-leaflet and then import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier-leaflet'; in my project.
I then do var oms = new OverlappingMarkerSpiderfier(this.map); but I get :
Unhandled Rejection (TypeError):
WEBPACK_IMPORTED_MODULE_8_overlapping_marker_spiderfier_leaflet.OverlappingMarkerSpiderfier is not a constructor
Do you know how I could solve this error. Do you think I could rather use the minified js to use this plugin? How so?
overlapping-marker-spiderfier-leaflet library doesn't export anything in an ES6 compatible way. But it could be directly imported as a file from the library's dist folder:
import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;
Example
import React from "react";
import {
withLeaflet,
MapLayer
} from "react-leaflet";
import L from "leaflet";
import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;
class Spiderfy extends Component {
componentDidMount(props) {
const { map } = props.leaflet;
const oms = new OverlappingMarkerSpiderfier(map);
//...
}
//...
}
This demo demonstrates how to integrate overlapping-marker-spiderfier-leaflet into react-leaflet.
Related
SnapSVG extension for Adobe Animate.cc 2017 is able to create interactivity and animations for the web. I'm currently trying to use an exported SnapSVG Adobe Animate.cc project in my REACT JS WebApplication.
What I've done so far:
Imported snapsvg-cjs from npm( modified snapsvg to use succesfull in React)
Imported axios to load custom json file generated from SnapSVG extension in Animate.cc
Excluded minified code with eslintignore from SnapSVGAnimator. lib, generated while publishing SVG animation from Animate.cc to work properly without the ESlinting warnings.
Create a componentDidMount function
current code:
import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { SVGAnim } from './SnapSVGAnimator.js';
import snapsvg from 'snapsvg-cjs';
componentDidMount(){
axios.get(jsonfile)
.then(response => {
const json = response.request.responseText;
const comp = new SVGAnim(json);
console.log(comp)
});
}
Problem
Following error appears while I log const comp.
Uncaught (in promise) TypeError:
_SnapSVGAnimator.SVGAnim is not a constructor
During the publish render in Animate.cc there are two libs generated; snapsvg.js and SVGAnimator.js
You can import snapsvg-cjs from NPM but SVGAnimator.js isn't available. Importing SVGAnimator.js with the ES6 approach from a curtain directory in your ReactApp isn't possible, not even by excluding it from linting with /* eslint-disable */ 1000 warnings still appears.
Instead of that, add the code to your index.html file, located in the public folder this way
(I've used create-react-app to build this project):
<script type="text/javascript" src="%PUBLIC_URL%/libs/SnapSVGAnimator.min.js"></script>
This is the working code:
import React, { Component } from 'react';
//axios for asnyc usage*/
import axios from 'axios';
//Snapsvg-cjs works out of the box with webpack
import Snapsvg from 'snapsvg-cjs';
//snap.json is located in the public folder, dev-build folder(ugly approach).
let jsonfile = "snap.json";
class SVGAnimator extends Component {
constructor(props){
super(props);
this.state = {
data: ''
}
}
componentDidMount(){
axios.get(jsonfile)
.then(response => {
this.setState({ data: response.data })
});
}
getSVG(){
if(this.state.data){
const container = document.getElementById('container');
const SVG = new window.SVGAnim(this.state.data, 269, 163, 24)
container.appendChild(SVG.s.node);
}
}
render() {
return (
<div id="container">
{ this.getSVG()}
</div>
);
}
}
export default SVGAnimator;
I am trying to import BrowserWindow inside of a react component file.
import { BrowserWindow } from 'electron';
class SomeComponent extends React.Component {
...
}
export default SomeComponent
I am using Webpack and Babel to compile to translate the ES6 code. But, when I add the import statement, I get an error from webpack saying
Module not found: Error: Can't resolve 'fs' /root_path/project_name/node_modules/electron
However, I use a similar statement in main.js in the root directory, and I was able to import BrowserWindow without any errors
//main.js
const { app, BrowserWindow } = require('electron');
I tried to use ES5 syntax in the react component, but still got the same error.
I found the answer to my problem.
I can use window.require to import the BrowserWindow inside my component files.
For example:
const { BrowserWindow } = window.require('electron').remote;
I create a new React Native project and install #shoutem/ui in project and include the Examples component of Shoutem UI into React Native app.
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Examples } from '#shoutem/ui';
class HelloWorld extends Component {
render() {
return (
<Examples />
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
But when I run start the project , I get "Unknown named module: 'react/lib/NativeMethodsMixin'" error.
The bug seems to be inside the #shoutem/animation module, in the Parallax.js file: https://github.com/shoutem/animation/blob/develop/Parallax.js
NativeMethodsMixin is not imported correctly from react:
If you change this:
import NativeMethodsMixin from 'react/lib/NativeMethodsMixin';
to this: import NativeMethodsMixin from 'react';
your app should work.
I would either file a Github issue on the #shoutem/animation project or check if the way NativeMethodsMixin is imported is specific to an older version of react and then use that version in your app.
I hope this helps.
This is fixed as of v0.8.9 release of #shoutem/animation.
Is there a way to parse Markdown in React using Typescript?
I am trying to do things like:
import * as ReactMarkdown from 'react-markdown'
// OR
import ReactMarkdown = require('react-markdown')
But Typescript can't fint module 'react-markdown' as it's not defined:
Error: TS2307: Cannot find module 'react-markdown'.
How can I define the module and use it as a React component?
I solved my problem by using commonmark package instead. They have typings and everything needed for my environment. Here is my implementation:
import { HtmlRenderer, Parser } from 'commonmark'
export class MyComponent extends React.Component<{}, {}> {
private post: string
constructor () {
super()
let parser = new Parser()
let renderer = new HtmlRenderer()
this.post = renderer.render(parser.parse("**works** like a charm!"))
}
render () {
return (
<div dangerouslySetInnerHTML={ {__html: this.post} } />
)
}
}
Also, do not forget to add the typings for commonmark:
$ typings install --global --save dt~commonmark
Thanks to the people who tried to help!
Is there a way to parse Markdown in React using Typescript?
I am trying to do things like:
import * as ReactMarkdown from 'react-markdown'
// OR
import ReactMarkdown = require('react-markdown')
But Typescript can't fint module 'react-markdown' as it's not defined:
Error: TS2307: Cannot find module 'react-markdown'.
How can I define the module and use it as a React component?
I solved my problem by using commonmark package instead. They have typings and everything needed for my environment. Here is my implementation:
import { HtmlRenderer, Parser } from 'commonmark'
export class MyComponent extends React.Component<{}, {}> {
private post: string
constructor () {
super()
let parser = new Parser()
let renderer = new HtmlRenderer()
this.post = renderer.render(parser.parse("**works** like a charm!"))
}
render () {
return (
<div dangerouslySetInnerHTML={ {__html: this.post} } />
)
}
}
Also, do not forget to add the typings for commonmark:
$ typings install --global --save dt~commonmark
Thanks to the people who tried to help!