Skip to content

Instantly share code, notes, and snippets.

@kenmori

kenmori/typed DnDDroppable, DnDDraggable DnDDragDropContext, hack by styled-components.md

Last active February 7, 2023 12:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kenmori/072bec992fc1054f29fe5e67d35142e2 to your computer and use it in GitHub Desktop.
Save kenmori/072bec992fc1054f29fe5e67d35142e2 to your computer and use it in GitHub Desktop.
Download ZIP
typed DnDDroppable, DnDDraggable DnDDragDropContext, hack by styled-components
Raw
typed DnDDroppable, DnDDraggable DnDDragDropContext, hack by styled-components.md

TypeScript x DnD.Droppable x DnD.Draggable x DnD.DragDropContext, hack by styled-components

If you get a type error from react-beautiful-dnd and have to fix it when you raise it to React18, you can solve it by wrapping it in styled-components and typedefing it.

const LibButton = styled(Lib.Button)<{children: React.ReactNode}>''

const DnDDroppable = styled(DnD.Droppable)<{children: (provided: DnD.Droppable Provided, snapshot:DnD.DroppableStateSnapshot) => React.ReactElement<HTMLElement, string | React.JSXElementConstructor<any>>}>''

const DnDDraggable = styled(DnD.Draggable)<{index: number, draggableld: string, children: (provided: DnD.DraggableProvided, snapshot: DnD.DraggableStateSnapshot) => React. ReactElement<HTMLElement, string | React.JSXElementConstructor<any>>}>''

const DnDDragDropContext = styled(DnD.DragDropContext)<{children: React.ReactNode}>''
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment