We Keep Coding

How to use Wix Style React components with TypeScript?

I have a project in typescript + react, I want to install wix-react components, And I have a lot of errors
import * as React from "react";
import Button from 'wix-style-react/Button';
export class Greeter extends React.Component<any, any> {
render() {
return (
<Button onClick={() => console.log('thanks for clicking :)')}>
Click me!
</Button>
)
}
}
First error what i have is:
Could not find a declaration file for module 'wix-style-react/Button'. '/Users/../node_modules/wix-style-react/Button.js' implicitly has an 'any' type.
Then i found #types/wix-style-react, Next error: jsx element type 'Button' does not have any construct or call signatures.
I do not know how to install, tell me the way

You are now getting the types automatically as the library provides it.
https://github.com/wix/wix-style-react/blob/master/docs/FAQ/TYPES.MD
The package mentioned above is no longer maintained and no longer needed.

How to make react-datepicker display properly?

I cannot make the component react-datepicker display properly.
it actually displays like this.
I wish it could display at least like the documentation for the component does.
I first thought it was a dependency problem, and added all the dependencies the doc says are needed. The result is still the same.
Some stackoverflow questions talked about this and referred to a missing stylesheet. However I imported everything with npm, so that shouldn't be the problem.
My class component looks like this :
import React from "react";
import "./style.css";
import DatePicker from "react-datepicker";
class Filters extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate : new Date()
};
this.handleStartChange = this.handleStartChange.bind(this);
}
handleStartChange = (date) => {
this.setState({
startDate : date
})
}
render() {
return (
<div className="filters">
<div id="filterbox">
<p id="titre">Filtres</p>
<DatePicker
selected={this.state.startDate}
onChange={this.handleStartChange} />
</div>
</div>
)
}
}
export default Filters;
I apologize in advance if the problem is very obvious, I'm quite new to reactjs.

You forgot to import the package css.
From the documentation:
import "react-datepicker/dist/react-datepicker.css";

I think you have to import the react-datepicker.css too, not only the package itself.
import "react-datepicker/dist/react-datepicker.css";
Below is a simple example of how to use the Datepicker in a React
view. You will also need to require the CSS file from this package (or
provide your own). The example below shows how to include the CSS from
this package if your build system supports requiring CSS files
(Webpack is one that does).

you haven't imported their css file.
import "react-datepicker/dist/react-datepicker.css";

VSCode bad javascript formatting

I am editing some javascript files (particularly, reactjs coed) in VS Code on Ubuntu 18.04. However, the "formatting" is really terrible.
Before:
import React, { Component } from 'react';
import './App.css';
import Dropzone from 'react-dropzone';
class App extends Component {
render() {
return (
<div className="App">
<Dropzone onDrop={this.onDrop} />
</div>
);
}
}
export default App;
After:
import React, {
Component
} from 'react';
import './App.css';
import Dropzone from 'react-dropzone';
class App extends Component {
render() {
return ( <
div className = "App" >
<
Dropzone onDrop = {
this.onDrop
}
/> <
/div>
);
}
}
export default App;
Previously, I was editing these files on Windows 10 in VS Code, and the formatter was great. Is there an extension I am missing? Or what am I doing wrong here. To format, I am using the "Format Document" keyboard shortcut.
Here are my current extensions:

The culprit for this behavior was Beatify extension on Vscode in my case. Disabling resolved the issue.

Here is the solution,
change the language manually to "javaScript React"
try with your favorite formatter(you can install vs code extensions such as "Prettier","beautify")
Cheers !

I personally use Prettier for JS and CSS formatting, and JS JSX Snippets for JSX in React. I have tried a lot of others, but with those 2 I can assure you your React code will look beautiful.

Why doesn't this component show at all? React DatePicker

Here is the component:
import React, { Component } from 'react';
import DatePicker from 'react-datepicker';
class DatePickerCreater extends Component {
constructor(props){
super(props);
}
render() {
return (
<DatePicker
disabled={this.props.answer.isDisabled}
dateFormat="YYYY/MM/DD"
selected={Date(this.props.answer.value)}
onChange={(e) => this.props.blurHandler(e.target.value,this.props.answer)}
/>
);
}
}
export default DatePickerCreater
when i try to render it, it shows nothing...
Very grateful for every answer!

The selected property takes a moment.js date, not a plain javascript date. You should get an error that says "date.clone is not a function
". You can fix that by using a moment date:
import moment from 'moment';
class DatePickerCreater extends Component {
render() {
return (
<DatePicker
disabled={this.props.answer.isDisabled}
dateFormat="YYYY/MM/DD"
selected={moment(this.props.answer.value)}
onChange={(e) => this.props.blurHandler(e.target.value, this.props.answer)}
/>
)
}
}
Also you may have forgotten to import the react-datepicker css file. Without that the popup will not show correctly:
import 'react-datepicker/dist/react-datepicker.css';
EDIT
Since they switched to using date-fns this answer is outdated. If you are using react-date-picker with a version >=2.0 you can no longer pass a moment.js instance. Instead use native Date objects and manipulate them using date-fns.
For Reference:
Up until version 1.8.0, this package was using Moment.js. Starting
v2.0.0, we switched to using date-fns, which uses native Date objects,
to reduce the size of the package. If you're switching from 1.8.0 to
2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.

The code is not enough, what can I tell super() need to be called with props:
constructor(props){
super(props);
// ... code
}

Errors with clipboard.js in React component?

I’m trying to use clipboard.js in a React component, and it causes my devserver to start failing with the Node error:
ReferenceError: Element is not defined
at Object.<anonymous> (/mnt/home/me/code/board/webapp/node_modules/matches-selector/index.js:6:13)
I initialize the clipboard in componentDidMount but am still getting this error. I actually think the error may have something to do with my import, because even when I don’t actually initialize the clipboard (but include the import) I get the error. Does anyone have an idea what I might be doing wrong?
Relevant code (styling excluded):
import React, { Component } from 'react';
import Clipboard from 'clipboard';
export default class CodeSnippet extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
new Clipboard('.copyButton', {
target: () => document.getElementById('snippet')
});
}
render() {
return (
<div style={styles.snippetCopy}>
<div id="snippet" style={styles.snippet}>
{'this text will copy'}
</div>
<button
className={"copyButton"}
id="clipper"
data-clipboard-text='snippet'
style={styles.buttonStyle}
text={'Copy code'}>
</button>
</div>
);
}
}

You can't require clipboard.js if you're doing server side rendering. It's annoying but instead of installing via npm, they suggest including the script manually like this:
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
https://github.com/zenorocha/clipboard.js/issues/157

I created a fiddle updating your code. It's a suggestion of integrating clipboardjs and React, using ref's and clipboardjs' text function.
Check here: https://jsfiddle.net/mrlew/L54ky6hj/