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!
Related
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.
I use WebStorm for React JS and I'm getting this 'Unresolved variable warning' for all props.
I searched for solution everywhere but couldn't find. Whenever i pass down prop value and then use it as this.props.something, that something is unresolved. App works fine and there is no problem, it's just that WebStorm makes this irritating. I installed typescript definitions and nothing.
This is the code:
import React from 'react';
import ReactDOM from 'react-dom';
class A extends React.Component
{
render()
{
return (
<button>
{this.props.something}
</button>
);
}
}
class B extends React.Component
{
render()
{
return(
<A something={1}/>
)
}
}
ReactDOM.render(
<B/>,
document.getElementById('root')
);
Here is screenshot of that:
Screenshot
Known issue, please follow WEB-31785 for updates
npm install --save #types/react
use es6 destructuring to remove the warnings:
eg : rather than
if (this.props.variableName) ...
use
const { variableName } = this.props;
if (variableName) ...
I'm currently converting a javascript/react project to a typescript/react/redux project.
I'm currently having a problem with this file:
import React from 'react';
import GoldenLayout from 'golden-layout';
import {Provider} from 'react-redux';
import Default from '../modules/m-Default/Default';
interface GoldenLayoutWrapperProps {}
interface GoldenLayoutWrapperState {}
class GoldenLayoutWrapper extends React.Component <GoldenLayoutWrapperProps, GoldenLayoutWrapperState> {
public layout;
static contextTypes = {
store: React.PropTypes.object.isRequired
};
private wrapComponent(Component, store) {
class Wrapped extends React.Component {
render () {
return (
<Provider store={store}>
<Component {...this.props}/>
</Provider>
)
}
}
return Wrapped;
}
componentDidMount() {
var layout = new GoldenLayout(this.layoutConfig, this.layout);
layout.registerComponent('Default', this.wrapComponent(Default, this.context.store));
}
render() {
return (
<div className="golden-layout-wrapper" ref={input => this.layout = input}/>
)
}
private layoutConfig = {}
}
export default GoldenLayoutWrapper;
When I attempt to compile, I get the following error:
ERROR in [at-loader] ./src/main/GoldenLayoutWrapper.tsx:18:22
TS2339: Property 'PropTypes' does not exist on type 'typeof React'.
After some searcing, some people suggested to give contextTypes a static modifier, which I attempted, but the problem still persists.
What could be the problem?
As you are using React v16.0.0 , You need to make use of prop-types as it is treated a separate library since React v15.5
You can install it via npm as a project dependency
npm install --save prop-types
And then inside your component where you want to use it :
import PropTypes from 'prop-types'; // ES6
Instead of React.PropTypes you can directly use PropTypes
You can read more about prop-types Here
Check my answer here for full details: Cannot read property 'string' of undefined | React.PropTypes | LayoutPropTypes.js
In short, as of React v15.5 React.PropTypes is deprecated. You'll need to install the prop-types package from npm.
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;
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!