How to use flow with draft-js?
See original GitHub issueDraft uses immutable models for most part, and the docs present type information for all the API. However, there is no flow typed definition for draft in flow-typed repo.
I do see some *.js.flow
files in the node_modules/draft-js/lib
directory however I am not sure if/how they can be used for type checking.
So, other than typing own type definition, is there some way I can use flow with draft-js? Here’s what my current configuration looks like (click to expand):
package.json (dependencies)
...
"dependencies": {
"draft-js": "^0.9.1",
"immutable": "^3.8.1",
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"flow-bin": "^0.37.4"
}
.flowconfig
[ignore]
.*\/node_modules\/draft-js\/lib\/.*.js.flow.*
[include]
[libs]
.*\/node_modules\/draft-js\/lib\/.*.js.flow.*
[options]
esproposal.class_static_fields=enable
suppress_type=$FlowIssue
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
index.js (file I am trying to typecheck)
// @flow
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
class MyEditor extends React.Component {
state: {
editorState: EditorState
}
onChange: Function;
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
// gives type error, as expected
let a :string = 10;
const editorState :EditorState = this.state.editorState;
// should be a type error, editor.getCurrentContent() returns type ContentState
const content :string = editorState.getCurrentContent();
}
render() {
return (
<Editor editorState={this.state.editorState} onChange={this.onChange} />
);
}
}
ReactDOM.render(
<MyEditor />,
document.getElementById('container')
);
Issue Analytics
- State:
- Created 7 years ago
- Comments:7
Top Results From Across the Web
Correct way to setup Flow with draft-js - Stack Overflow
I am trying to use Flow with draft-js. package.json dependencies ... "dependencies": { "draft-js": "^0.9 ...
Read more >EditorChangeType - Draft.js
It is represented as a Flow type, as a union of strings. ... Flow will enforce the use of an appropriate EditorChangeType value....
Read more >draft-js-utils | Yarn - Package Manager
Development. This project uses Flow for static type checking. The type annotations are optional, but preferred. Each file can opt-in to using Flow...
Read more >Slate.js vs Draft.js, a review
js to all who start working on text-based interfaces. Draft.js, Slate.js. Licensing, MIT, MIT. Type System, Uses Flow, 3rd party ...
Read more >DraftJS vs Flow Framework | What are the differences? - StackShare
DraftJS and Flow Framework can be categorized as "Frameworks (Full Stack)" tools. ... Node.js uses an event-driven, non-blocking I/O model that makes it ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@flarnie Should we use master somehow (I don’t know how), or wait for a new relase? Thank you.
Still very much broken!