I'm working in a dashboard inside a React App and I used the React + DC.JS (https://github.com/LightTag/dcjs-in-react) as a guide. So far, so good.
Now I was required to add some new info in a component that used to be a dc.js dataTable so when the user click in a row, it would expand and show more data. My idea was to use the dataGrid instead and inject an material-ui ExpandPanel inside the HTML function of the dataGrid. Since the documentation says you can use any template engine inside it, I thought it would work.
Well, it doesn't work. I tried use an external function to the render the elements, explicit call React.createElement, put it inside parenthesis for the JSX, but all I got is a bunch of ''[object Object]''.
Any ideas of how to render React Elements inside a DC.js DataGrid?
Related
So I have a component that returns a button with some custom text and an icon. I'm pulling the icons from expo vector icons and so to use the icons I need to write something like:
<Icon_Name name"name"......>
I want to wrap my custom component around an icon or any other component, so then I can use various different icons within that component.
So I want my code to basically be:
<Custom_Component>
<IconOrSomeOtherComponent />
</Custom_Component>
I want to somehow call that icon component within my custom component. Is this possible?
I know that I can pass in variables into a custom component like:
<Custom_Component someVariable="some variable" />
and then use "someVariable" within my the function of the component, but I was hoping to find a solution where I can just wrap a component and call the "wrapped" component inside the function of my "Custom_Component".
I'm using functional components by the way, not class components.
I have a React App with a global custom cursor (not only a png changed in CSS, but a colored circle-div that‘s following the mouse).
My App consists of various child components (project teasers), when hovering those project teaser components the cursor component should change size, color and text content.
I have no experience with Redux so far, but do I need to store the cursor state in Redux for such a scenario or can I pass it down another way?
Thanks.
You can either use react context/redux or manually pass down the props each component. If you want study react context, here's a good article.
I'm attempting to open an external window and display React components inside of it. My implementation follows this article - https://medium.com/hackernoon/using-a-react-16-portal-to-do-something-cool-2a2d627b0202
Here's a gif of the problem - https://streamable.com/unfom
GitHub repo that reproduces the problem - https://github.com/sh3nan1gans/material-ui-external-window
I learned that I needed to use a custom JSS insertion point for the children of my external window so that any material-ui components would insert their styles into the external document.head instead of the original document. The problem with this is that when the external window is closed the material-ui components aren't styled correctly and components that use portals (i.e., Menus) don't anchor correctly. It seems like I need to reset the insertion point once the external window is closed.
Was able to figure it out based on this example - https://codesandbox.io/s/308nkoz2xp
The piece that I was missing was passing a new Map() into the sheetsManager prop for the StylesProvider
I trying to use this awesome tooltip library Popper.js
I want to use the above tooltip utility to render React Components into it. Right now, my understanding is that I can only give static html to the tooltip using title property and html set to true in the config object. I tried ReactDOMServer.renderToString but that is again creating a static markup with no lifecycle hooks or any of the React goodness. Is there any way I can inject React Components into the tooltip? Or can you please suggest some other library like this that supports flip behaviour on viewport boundaries?
PS: I don't want to use Popper.js or react-popper as I want the trigger functionality to work out of the box.
On tooltip initializing you can pass a boolean prop defining your title as an HTML
new Tooltip(reference, {html: true, title: "<div>This is a component</div>"})
See tooltip documentation
I ended up using react-popper package.
I've recently gotten into React Leaflet and from what I've gathered from the docs, it is not possible to add a custom React Element (Component or pure functional) as a marker.
What I want to achieve is to be able to use my React Element which is an SVG icon as the marker. This would be useful because I'll need to display several different color icons and it's way more convenient to pass the color as props and let React create the marker.
Am I right in assuming this isn't possible?
You are incorrect! :) React-leaflet allows the creation of custom components. Also, you should check out react-leaflet-div-icon since it seems like it's exactly what you need.