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.
Related
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?
The documentation for the react-bootstrap overlay trigger says that the overlay prop can be an element or text. However, whenever I pass it something other than a "Tooltip" component it doesn't work. In fact, if you modify their code example on the website linked below to be just a div instead of a Tooltip or a string, it doesn't work on their site either. Does it have to be passed a Tooltip?
https://react-bootstrap.github.io/components.html#tooltips-overlay-trigger
Easiest thing to pass is a Tooltip or a Popover.
You could also pass it something else, but then you have to wrap it in an Overlay instead of an OverlayTrigger. See the react-bootstrap docs on Custom Overlays for more specific examples.
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.
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle
I know there is an Ext.Fx.Anim in Ext JS 4.0 and it is missing in Ext JS 3.4. Just wanted to know if there are any workarounds in getting some basic (say ease in) animation for a Component in Ext JS 3.4.
I'm assuming you want to do it for a component that is not in a managed layout. If that is true, you can animate the Ext.Element that wraps your content by calling Ext.Component.getEl()
var panel = new Ext.Panel({html: 'My content'});
// Or any method defined in http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Fx
panel.getEl().slideIn();
In 3.4, you have Ext.Fx class, which is applied, automatically by the framework, to Ext.Element. So, every element, by default, has the animation support. And with this, the methods that you see in Ext.Fx are also available on you element, like - highlight, fadeIn, slideIn, etc.