Sha256: 84d6b0245144858fd482008e8eb4cc5fc0fbb7d80eaaaa6652a85f866ccc9086
Contents?: true
Size: 1.08 KB
Versions: 50
Compression:
Stored size: 1.08 KB
Contents
import React, { useState } from "react";
import { Flex, Image, Draggable, DraggableProvider } from "../../";
// Initial items to be dragged
const data = [
{
id: "21",
url: "https://unsplash.it/500/400/?image=633",
},
{
id: "22",
url: "https://unsplash.it/500/400/?image=634",
},
{
id: "23",
url: "https://unsplash.it/500/400/?image=637",
},
];
const DraggableDefault = (props) => {
const [initialState, setInitialState] = useState(data);
return (
<>
<DraggableProvider initialItems={data}
onReorder={(items) => setInitialState(items)}
>
<Draggable.Container {...props}>
<Flex>
{initialState.map(({ id, url }) => (
<Draggable.Item dragId={id}
key={id}
>
<Image alt={id}
margin="xs"
size="md"
url={url}
/>
</Draggable.Item>
))}
</Flex>
</Draggable.Container>
</DraggableProvider>
</>
);
};
export default DraggableDefault;
Version data entries
50 entries across 50 versions & 2 rubygems