rearrange listgroup items in reactstrap - reactjs

I had a listgroup from reactstrap and I want to be able to drag items to rearrange them and change the order after the page has loaded? Is this possible or are listgroups static?

Reactstrap ListGroup does not support drag and drop functionality you have to use other react component for that like react-drag-list, react-draggable-list, etc
react-drag-list
react-draggable-list

Related

Custom menu items and layout in react material select

I am using material select component in my react application. Can i specify the layout of menu items to next to each other and wrap to new line ? Desired componnent should look like this:

DC.JS data-grid render React component

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?

How do I create a window in react?

Is there any component similar to ext.window in react?
I checked bootstrap/material ui and the closest thing to a window are modals, but I would like to find something resizable and draggable.
You can try specific components that do this, like react-rnd.
See the demo, you can both resize and drag the created component.
Here, you have a live example in codesandbox.
What you need is a draggable modal with React implementation:
Bootstrap draggable modal
https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503
Material UI draggable modal
https://codesandbox.io/s/nnq98zlrrl
I've been using Material-Ui for a while.
There's a standard modal and dialog (like a modal but with default template for easier customization)
Isn't modal (dialog) sufficient for the job that you want?

antd dont import all icons

I am using only the loading property of Button component.
Internally the button component requires 0.5mb of icons.
Is there is any way to use only loading icon and not the huge icons import?
Thanks.
I haven't tried for Icon components,
but you can check out babel-plugin-import, which optimizes import statements.
I was able to make it work with CSS & other AntD components.
What I understood from your question is correct, the answer is no. In the meanwhile, you can try another way. download the specific icon as an SVG format form the icon and create your own icon bundle for using icon moon and use it. So you can reduce the size.
Bonus point: Always try to import a specific component like below instead downloading whole antd component.
import Button from 'antd/lib/button';

How to add or remove layers using react-leaflet

I would like to render two distinct react components:
A leaflet map
A sidebar component where I render a list of checkbox to enable/disable GeoJSON layers.
I am using react-leaflet package. And I am using reflux store for keeping the list of all possible layers I will render in the map.
I would like to know whats the best approach for add layers on demand, using the checkbox onChange event. Thanks
In your checkbox events you would update a "layer toggle" value in your store. Assuming you are set up correctly this value should push a update to your page. So, all you have to do is conditionally render your page based on those "layer toggle" values saved in your store.
Let me know if you would like more explanation.
import { Map, TileLayer, LayersControl } from 'react-leaflet';
const { Overlay } = LayersControl;
use the overlay in your map, here is a detail example about this.
https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/layers-control.js

Resources