react-sortable-hoc | A set of higher-order components to turn any list | Frontend Framework library

 by   clauderic JavaScript Version: 1.11.0 License: MIT

kandi X-RAY | react-sortable-hoc Summary

kandi X-RAY | react-sortable-hoc Summary

react-sortable-hoc is a JavaScript library typically used in User Interface, Frontend Framework, React applications. react-sortable-hoc has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i vovanmix-react-sortable-hoc' or download it from GitHub, npm.

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list.

            kandi-support Support

              react-sortable-hoc has a medium active ecosystem.
              It has 10492 star(s) with 1017 fork(s). There are 84 watchers for this library.
              It had no major release in the last 12 months.
              There are 214 open issues and 382 have been closed. On average issues are closed in 219 days. There are 73 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of react-sortable-hoc is 1.11.0

            kandi-Quality Quality

              react-sortable-hoc has 0 bugs and 0 code smells.

            kandi-Security Security

              react-sortable-hoc has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              react-sortable-hoc code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              react-sortable-hoc is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              react-sortable-hoc releases are not available. You will need to build from source code and install.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi has reviewed react-sortable-hoc and discovered the below as its top functions. This is intended to give you an instant insight into react-sortable-hoc implemented functionality, and help decide if they suit your requirements.
            • Get lock offset offset .
            • Initialize an item .
            • Clones a single node
            • simple list items
            • Calculates the lock offsets to pixel width and height
            • Move an array .
            • Get the position of a touch event .
            • Calculates the offset offset of a node .
            • Sort function for nodes
            • Returns the pixel gap in grid .
            Get all kandi verified functions for this library.

            react-sortable-hoc Key Features

            No Key Features are available at this moment for react-sortable-hoc.

            react-sortable-hoc Examples and Code Snippets

            No Code Snippets are available at this moment for react-sortable-hoc.

            Community Discussions


            NPM UNMET PEER DEPENDENCY questionmarks
            Asked 2021-Nov-17 at 07:29

            Im using npm version 6.17.1

            I have React 15.4.0 installed

            I try and install npm install pretty-checkbox which gives me



            Answered 2021-Nov-17 at 07:22

            I could see pretty-checkbox's developer last published 4 years ago.

            Let's say the new module used popper-js@2.0 and someone who already had popper-js@4.0 as direct or sub-dependency in their project is more likely to face unmet peer dependency on using the new module.

            Downgrading the version is not recommended due to possible conflict with other modules. A workaround would be to add resolutions.

            Before doing anything, ensure there is no other version of react installed globally, delete your node-modules folder and package-lock.json file. Ensure your package.json dependency has react@15.4.0 and only add popperjs@^1.16.0 if you're sure that other modules in your project are not relying on later versions of popperjs.

            Take a look at this article for a good explanation on peer dependencies

            If there are other modules that needs other versions of popperjs then in your package.json you could add an additional property at the end like below,



            npm ci failing on linux
            Asked 2021-Jul-25 at 13:38

            Current behaviour:

            I'm having a local development environment on mac from which I git push to my remote repo. My production server is on linxu and there I pull my repo. Usually this works fine but this time I'm stuck with an error I can't find a workaround for :( npm ci failing on linux because of fsevents

            Steps to reproduce:

            $ npm ci



            Answered 2021-Jul-25 at 13:38

            This is a well-known problem, one of your package dependencies needs fs-events when running on macOS.

            When Node.js is running on Linux,this package is not needed, and since you are using --ci flag, it fails to install fs-events on Linux.

            You can try removing --ci flag or you can try adding fs-events in optionalDependencies in your package file.



            React react-sortable-hoc cancel reordering(Undo order changes)
            Asked 2021-Jun-12 at 06:20

            I'm using react-sortable-hoc to reorder table rows with Save and Cancel buttons. However, I can't find any information or example about reverting back to original order when the Cancel button is clicked after re-ordered rows.

            Can't find any info or example on the official documentation or anywhere else. It seems weird to me that there's no cancel function built in or am I missing something?

            Edit: Example code



            Answered 2021-Jun-12 at 06:20

            If you want to undo order changes then you can maintain an undo stack. Each time an order change is complete, stash a copy of the previous data state. When the undo button is clicked you pop from the undo stack back into the data state.

            1. Add an undoStack to state.



            Is there a way to disable sorting in react-sortable--hoc
            Asked 2021-May-20 at 16:28

            I have a requirement where the sorting of the list depends on the state which can be toggled using a button. The user should be able to sort only when he is in the editing mode. So I need to disable the sorting of the list. Can anyone help me out on how to add the disabled key to the SortableElement in react-sortable-hoc. I tired to search a working example on google but couldn't find any. Can anyone out there help me out on this one?.



            Answered 2021-May-20 at 16:28

            From reading the documentation, seems like SortableElement supports a disabled flag, you could set the disabled flag to:



            react-sortable-hoc grid layout issue in firefox only (works fine in safari, edge and chrome)
            Asked 2021-Mar-16 at 13:40

            The functionality is working fine in safari, edge, and chrome, the problem is only with firefox.

            I'm using react-sortable-hoc react library to sort the images in grid layout but in firefox the grid layout sorting works weird...

            Please test the problem here:

            What's the problem: I'm trying to set flex-wrap: wrap; and this is causing the problem of user interaction(when a user tries to sort the image (drag and drop), on click the image sticks with mouse and even if user releases the click the image is still stuck with the mouse. user need to click again to release the image)

            what should happen: User should be able to drag and drop the image by simply click and hold the mouse, drag to another position and release the click. (this works in other browsers except for firefox)

            Ref: the same is working here, if I do inspect and use wrap. just inspect element apply the below code to parent container to wrap the children in grid layout



            Answered 2021-Mar-16 at 13:40

            actually, the problem was to assign pointer-events: none to the parent container.



            @typescript-eslint/no-unused-vars not works correctly
            Asked 2021-Feb-10 at 12:49

            After @typescript-eslint upgrade es-lint started lint errors like:

            28:15 error 'token' is defined but never used @typescript-eslint/no-unused-vars

            in source code:



            Answered 2021-Feb-10 at 12:49

            Add these line to your eslintrc.js file under rules:



            Changed incoming props not rerendering react-sortable-hoc list
            Asked 2020-Dec-13 at 18:11

            I'm currently trying to add react-sortable-hoc to a list component and I'm running into a number of bugs when I change the incoming list of items via props. For example: if I add an item to the array, and I check the incoming props for the list, the props in the sortable component are changing (I see the new item in the list component props), but I can't get the component to re-render. I've tried shouldComponentUpdate, getDerivedStateFromProps, using PureComponent instead of Component, forceUpdate, hookifying the whole thing and setting up a useEffect for any change in props, nothing is causing a rerender and I know that the new list is getting to the component.

            Is anyone else having this same problem or has anyone found a way around it?

            here's how I'm setting props/state, and how I know the props are changing:



            Answered 2020-Sep-25 at 22:39

            OOOPSIE DAISY! Don't copy your props into state, y'all. Don't be like me!

            removing state management and turning this into a function fixed all the bugs I was encountering.



            Example of Ant Design Table with both resizable columns and drag and drop columns?
            Asked 2020-Sep-06 at 06:06

            I am trying to implement both resizable and drag and drop columns in Ant Design's Table component.

            I have got both working independently but cannot make them work without errors or bugs at the same time. I need to be able to drag on a column border and resize it horizontally and also be able to click on a the column header and drag and drop it.

            I am looking for these functionalities to be similar to the features of this table:

            I have tried implementing it with react-resizable for resizable columns and both react-sortable-hoc and react-drag-listview for drag and dropping column order.

            With the react-drag-listview the latest problem is that I must disable one feature when using the other, and in Firefox, this results in the error:

            Uncaught TypeError: target.parentNode

            I can't find any examples of both of these features being used together with the Ant D table but I'm sure it must be possible to make them work simultaneously.




            Answered 2020-Sep-06 at 06:06

            Start it with antd table resizable column codes from documentation then you can integrate the react-drag-listview library to make the columns draggable. With these, you can achieved a resizable columns at the same time can be sort by drag and drop. See below link for reference.

            Table column drag and drop sortable and resizable



            Two drag and drop libraries having conflict
            Asked 2020-Jun-30 at 05:05

            We are both using react-sortable-hoc and react-dropzone and they work fine if on separate pages. However, react-sortable-hoc do not work properly when react-dropzone is used on the same page because I noticed that react-dropzone also gets triggered by the drag event from the react-sortable-hoc. (E.g. I can no longer drag an item in between other items.)

            I tried adding e.preventDefault() and e.stopPropagation() on react-sortable-hoc's onSortStart event but react-dropzone is still being triggered.

            What other approach can we try to make them play nice together / not allow the other to be affected?



            Answered 2020-Jun-25 at 07:18

            If the problem is caused when dropping (not when starting the drag): react-dropzone takes over the whole window regarding file drops, to prevent the browser from navigating away from the current page to the dropped file if the user misses the drop zone (a common annoyance).

            More specifically, dragover and drop handlers are registered on the document:



            how to update records after drag and drop
            Asked 2020-May-31 at 10:32

            I am using react-sortable-hoc to drag/drop and reorder items. When I do this though I want to update the database (node.js and mongodb).

            Firstly, I have changed it to be a functional component which is why my syntax looks a bit different to the example.



            Answered 2020-May-31 at 09:55

            Simplest and safest way I think would just be to use "order" key in the objects held by the array. You could just keep the array in any order, instead using the "order" key to handle, well, the order.

            You can always manipulate your array with the built-in sort() method, or query this the "order" key in Mongoose.

            Basically, don't use the array's order, but your own instead.


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install react-sortable-hoc

            Then, using a module bundler that supports either CommonJS or ES2015 modules, such as webpack:.


            Need to sort items in a grid? We've got you covered! Just set the axis prop to xy. Grid support is currently limited to a setup where all the cells in the grid have the same width and height, though we're working hard to get variable width support in the near future.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone clauderic/react-sortable-hoc

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link