Sha256: 21af55607a5db35bbec2d06cd3726e8234f29e581478c884c123c53956b76546
Contents?: true
Size: 1.09 KB
Versions: 948
Compression:
Stored size: 1.09 KB
Contents
import React, { useState } from "react";
import { Flex, Image, Draggable, DraggableProvider } from "playbook-ui";
// 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
948 entries across 948 versions & 2 rubygems