I want to import this package.
The link only provide this example
var LineChart = require("react-chartjs").Line;
var MyComponent = React.createClass({
render: function() {
return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
}
});
but how to import like this
import {LineChart } from 'react-chartjs';
I can not figure out how to
.Line;
in import style
var LineChart = require("react-chartjs").Line;
Equivalent
import Line from 'react-chartjs/lib/line';
Given the answer from oxy_js, I believe the import line you want is
import { Line as LineChart } from 'react-chartjs';
This is import Line but alias it as LineChart for use in this file.
You can write
import Line from 'react-chartjs';
Because in index.js of react-chartjs Line is listed as
module.exports = {
Bar: require('./lib/bar'),
Doughnut: require('./lib/doughnut'),
Line: require('./lib/line'),
Pie: require('./lib/pie'),
PolarArea: require('./lib/polar-area'),
Radar: require('./lib/radar'),
createClass: require('./lib/core').createClass
};
And then use {Line} when you need.
Related
How to parse latitude and longitude as input values to mongo db?
I have used react leaflet to get the location of a user. When I try to parse the cordinations to the DB it didnt work.
Here is the code...
Imports...
import React, { Component } from 'react'
import { useState } from 'react'
import Leaflet from 'leaflet';
import {
MapContainer,
Marker,
Popup,
TileLayer,
useMapEvents,
} from 'react-leaflet'
import './map.css';
import 'leaflet/dist/leaflet.css';
import Swal from 'sweetalert2';
import axios from 'axios';
Leaflet function...
function LocationMarker() {
const [position, setPosition] = useState(null)
const map = useMapEvents({
click() {
map.locate()
},
locationfound(e) {
setPosition(e.latlng)
map.flyTo(e.latlng, map.getZoom())
},
})
return position === null ? null : (
<Marker position={position}>
<Popup>You are here</Popup>
</Marker>
)
}
Leaflet Map...
<center>
<MapContainer center={{ lat: 6.927079, lng: 79.861244 }} zoom={13}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<LocationMarker />
</MapContainer>
</center>
I am using nuxt 3 and Compositions API.
I get such a nesting, how to get rid of the extra svg tag?
I would also like to receive svg attributes whenever possible and change, for example, fill
template
<template>
<div>
<component :is="render"></component>
</div>
</template>
Script
import { h } from "vue";
const { data, pending, error, refresh } = await useFetch(svgURL);
const getDataVal = data.value
const SvgToRaw = await getDataVal.text();
const render = () => {
return h("svg", {
class: "bar",
innerHTML: SvgToRaw,
});
};
Chrome Dev Tools
I tried to create a virtual DOM tree and get an HTML element from there, not text, but I think this is a bad solution
import hv from "virtual-dom/h";
import diff from "virtual-dom/diff";
import patch from "virtual-dom/patch";
import createElement from "virtual-dom/create-element";
const betaRender = hv("span", { innerHTML: svgString });
var rootNode = createElement(betaRender);
var patches = diff(rootNode);
return patches[0].vNode.innerHTML
SSR support is important to me so I can't use standard tools
I've been teaching myself React and node.js in my free time, and am hitting a wall with why my use of material-ui's makeStyles is breaking react hook rules.
I've been replicating the code from the material-ui website but even this appears to break the rules. The key difference between their code examples and mine is that my code has multiple exports. Included code below shows just one of these functions - they would all be very similar in function.
The expected behaviour is that the colour of the Icon changes to a non-OOTB color provided by material-UI.
Instead I get Invalid hook call. Hooks can only be called inside of the body of a function component. I believe I'm doing this at the top level and not inside of a condition/comparison statement. A bit lost!
Any guidance on where I'm going wrong would be amazing.
Thanks!
// ItemHelper.js
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import AssignmentIcon from '#material-ui/icons/Assignment';
import BugIcon from '#material-ui/icons/BugReport';
import BookIcon from '#material-ui/icons/Book';
import Help from '#material-ui/icons/Help';
const useStyles = makeStyles(theme => ({
successIcon: {
color: 'green'
},
errorIcon: {
color: 'red'
}
}));
export function GetIconForItemType(itemTypeID) {
const classes = useStyles();
var data = null;
switch (itemTypeID) {
case 1:
data = <AssignmentIcon className={classes.successIcon} />;
break;
case 2:
data = <BugIcon color="error" />;
break;
case 3:
data = <BookIcon color="primary" />;
break;
default:
data = <Help />;
break;
}
return data;
}
I'm trying to use https://material-ui.com/ components inside shadow dom, and need a way to inject those styles inside shadow dom. by default material-ui, which uses jss under the hood injects styles in the head of the page.
Is that even possible? Can anyone come with an example?
This is what my web component looks like, it is a web component that renders a react app that contains material-ui styles.
import * as React from 'react';
import { render } from 'react-dom';
import { StylesProvider, jssPreset } from '#material-ui/styles';
import { create } from 'jss';
import { App } from '#myApp/core';
class MyWebComponent extends HTMLElement {
connectedCallback() {
const shadowRoot = this.attachShadow({ mode: 'open' });
const mountPoint = document.createElement('span');
const reactRoot = shadowRoot.appendChild(mountPoint);
const jss = create({
...jssPreset(),
insertionPoint: reactRoot
});
render(
<StylesProvider jss={jss}>
<App />
</StylesProvider>,
mountPoint
);
}
}
customElements.define('my-web-commponent', MyWebComponent);
Setting the insertionPoint on jss to the actual react root inside the shadow root will tell jss to insert those styles inside that shadow root.
Using https://github.com/Wildhoney/ReactShadow to create shadow dom (you could also do it by hand as shown in previous answer), I created a small WrapperComponent that encapsulates the logic.
import root from 'react-shadow';
import {jssPreset, StylesProvider} from "#material-ui/styles";
import {create} from 'jss';
import React, {useState} from "react"
const WrappedJssComponent = ({children}) => {
const [jss, setJss] = useState(null);
function setRefAndCreateJss(headRef) {
if (headRef && !jss) {
const createdJssWithRef = create({...jssPreset(), insertionPoint: headRef})
setJss(createdJssWithRef)
}
}
return (
<root.div>
<head>
<style ref={setRefAndCreateJss}></style>
</head>
{jss &&
<StylesProvider jss={jss}>
{children}
</StylesProvider>
}
</root.div>
)
}
export default WrappedJssComponent
Then you just need to Wrap your app, or the part of your app you want to shadow inside <WrappedJssComponenent><YourComponent></YourComponent></WrappedJssComponenent>.
Be careful, some of the material-UI component won't work as usual (I had some trouble with
ClickAwayListener, maybe because it uses the parent dom, did not investigate more than that to be honest.
Popper, and everything that will try to use document.body as container will not have access to jss defined in shadow node. You should give an element inside the shadow dom as container.
There is also a whole page in the docs now (MaterialUI 5) that covers how to integrate MUI with a shadow-dom. You also might have to set Portal defaults not to target the dom. https://mui.com/material-ui/guides/shadow-dom/
When using #material-ui/core/CssBaseline with MUI, also emotion styles are being used. In order to support both legacy jss and emotion you can extend the accepted answer above with a CacheProvider like this:
import ReactDOM from 'react-dom/client'
import App from './App'
import createCache from '#emotion/cache'
import { CacheProvider } from '#emotion/react';
import { StylesProvider, jssPreset } from '#material-ui/styles';
import { create } from 'jss';
class ReportComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
const mountPoint = document.createElement('div');
const emotionPoint = this.shadowRoot!.appendChild(document.createElement('div'));
const emotionCache = createCache({
key: 'report-component',
container: emotionPoint
});
const reactRoot = this.shadowRoot!.appendChild(mountPoint);
const root = ReactDOM.createRoot(reactRoot);
const jss = create({
...jssPreset(),
insertionPoint: reactRoot
});
root.render(
<StylesProvider jss={jss}>
<CacheProvider value={emotionCache}>
<App />
</CacheProvider>
</StylesProvider>
);
}
}
customElements.define('report-component', ReportComponent);
I am looking to use Recharts as a graph system for my React app.
To install I have gone to the installation guide and entered the following command in the terminal
$ npm install recharts
My jsx file then looks like the code below:
import React from "react";
import ReactDOM from "react-dom";
import ReCharts from "recharts";
var App = React.createClass({
render: function() {
var data = [{ name: 'a', value: 12 }];
return (
<LineChart width={400} height={400} data={data}>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
</LineChart>
);
}
});
ReactDOM.render(<App/>, document.getElementById('app'));
It is not working as I am not importing recharges correctly. Can anyone advise and explain how this should be imported and any advice on how I soul know if I am exporting another library without any explicit guidance in its documentation.
You need import LineChart and Line components from Recharts, because this library does not have default exports Recharts index
import { LineChart, Line } from 'recharts';
Update
also you need change dataKey, from 'uv' to 'value' because in data you use value as key for chart values
Example