I'm trying to use some web components inside a React application. However, React is not able to detect the web component tags.
import React from "react";
import "./App.css";
import "#vaadin/vaadin-button";
import "#vaadin/vaadin-text-field";
function App() {
return (
<div className="App">
<vaadin-text-field label="First Name" ref="firstName" />
<vaadin-text-field label="Last Name" ref="lastName" />
<vaadin-button ref="addButton"> Add </vaadin-button>
</div>
);
}
export default App;
I'm getting errors like,
Property 'vaadin-text-field' does not exist on type
'JSX.IntrinsicElements'.
Do I need to use Reactify-WC to be able to use WebComponents in React?
Assuming that is a Typescript compile error. You need to add typescript declarations to your
react-app-env.d.ts
declare namespace JSX {
interface IntrinsicElements {
'vaadin-text-field': { 'prop': any };
'vaadin-button d': { 'prop': any };
}
}
or possibly at the top of the file
Related
I have installed react-planner in my react app and I want to use in react component. I follow the mentioned the guideline but not work in react component
I tried that
`
import React from "react";
import ReactPlanner from "react-planner";
function WarehouseDesign() {
return (
<div>
<h2>design</h2>
<ReactPlanner
// catalog={MyCatalog}
width={800}
height={600}
// plugins={plugins}
stateExtractor={(state) => state.get("react-planner")}
/>
</div>
);
}
export default WarehouseDesign
;`
ERROR
Failed to compile
./src/components/dashboard/Warehouse/WarehouseDesign.tsx
Attempted import error: 'react-planner' does not contain a default export (imported as 'ReactPlanner').
I created a typescript react app and installed ant design in it. Upon calling the Button Element just like in the their documentation I am getting this error. I looked up everywhere but I am not getting any solution for my problem.
this is my React Code.
import { FC } from 'react';
import { Button } from 'antd'
import './App.css';
const App: FC = () => {
return (
<div className="App">
<Button type='primary'>Button</Button>
</div>
);
}
export default App;
I think this is ant design related. Thanks for anyone who can help.
I learn react and came across this code:
import React, { Component } from "react";
import Header from "./components/structure/Header";
import Content from "./components/structure/Content";
import Footer from "./components/structure/Footer";
import Resume from "./resume.json";
class App extends Component {
componentDidMount() {
document.title = [
Resume.basics.name,
Resume.basics.label,
[Resume.basics.location.region, Resume.basics.location.country].join(", ")
].join(" | ");
}
render() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}
}
export default App;
What I cant figure out is how is document.title used? I cant see that it is exported or that
any part of the code(other components) are using it.
Maybe it's not used and could be removed??
The variable "document" is an environment variable provided by the browser,
It gives you access to various features to access the page elements, on of those features is to access the "title" of the page and read or edit it, which you can see at the top of the browser.
I am currently using the react-barcode package. It is currently using the format="CODE128" format, I needed to change it to use the Code 39 Barcode Font. How to I import the font to my react project and use it in the react-barcode component. If its not possible is there any other components I can use to achieve this.
Code:
import React, { Component } from 'react';
import Barcode from 'react-barcode';
class Posts extends Component {
render () {
return (
<div>
<Barcode value="http://github.com/kciter" />
</div>
);
}
}
export default (Posts);
Display of the
code128 barcode
React-barcode doesn't use a barcode font at all.
You can just, following the docs, set format="CODE39".
<Barcode value="123456" format="CODE39" />
I'm not sure if I'm explaining what I want right. Here's an example of what I'm trying to do:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class ExampleChild extends Component {
render() {
return (
<p>Hello!!</p>
);
}
}
class ExampleParent extends Component {
render() {
return (
<div>
<ExampleChild />
Here's the ExampleChild code:
{ExampleChild.toString()}
</div>
);
}
}
ReactDOM.render(<ExampleParent />, document.getElementById('root'));
An get the following output to the DOM, with all the correct indentations and spaces of the actual code:
Hello!!
Here's the ExampleChild code:
render() {
return (
< p >Hello!!< /p >
);
}
If the child component is just a stateless, functional component, I can do a .toString(), but it returns it in pure Javascript. It doesn't return it in the JSX format, or with the original returns, and indentations. I would also like to be able to do this with React class components as well. Is there maybe a library that does this?
You could use renderToStaticMarkup from react-dom/server, but only for the resulting HTML markup.
import React from "react";
import { render } from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
import Hello from "./Hello";
const App = () => (
<div>
<p>Component:</p>
<Hello name="CodeSandbox" />
<p>As HTML:</p>
<pre>{renderToStaticMarkup(<Hello name="CodeSandbox" />)}</pre>
</div>
);
render(<App />, document.getElementById("root"));
Check it out on CodeSandbox.
If you want the whole JSX file, you could import with something like raw-loader and print it inside pres as well.
I ended up using the react syntax highlighting library react-syntax-highlighter
I created an npm script to make copies of my react components and exported them as template literals. Which, then would be displayed via react-syntax-highlighter.
Working example: ryanpaixao.com
I didn't go with raw-loader because I didn't want to eject my create-react-app. (I would've had to in order to configure webpack) Also, it seems that I would've had to set all .js files to be imported as strings (maybe there's a way around that).