chore: Add npm Downloads Trend Image to README

[cwtuan]

Hello,

I’ve created this PR to add a dynamic npm downloads trend image to the README. This visual representation will give potential users a clear idea of the growing popularity of gridstack over recent years.

I'm one of the maintainers of npm-compare.com, and if you or the community need other features from our platform, I’d be more than happy to assist with any further integrations.

Thank you for considering this PR, and I’m looking forward to your feedback!

[adumesny]

@cwtuan thanks for the info. but I would like to work on the wording describing GS as it is not complete on your website. Curious how you find alternatives as well...

[cwtuan]

Could you please provide a description of GS that you think would be more accurate? I would be happy to update the website with the new description

[adumesny]

from https://npm-compare.com/gridstack/#timeRange=THREE_YEARS

could say: (i.e the focus is on dashboard of different sized items, and framework neutral)

gridstack is a powerful mobile-friendly TypeScript library for building responsive, draggable, and resizable dashboard layouts. It is framework neutral and works great with Angular (wrapper included), with example for React, Vue, and more. It allows developers to create dynamic and interactive grid interfaces easily, making it ideal for applications that require a flexible layout, such as dashboards and content management systems, complex nested grids and more. While gridstack is a robust solution for grid layouts, there are several alternatives that also offer unique features for managing grid-based designs. Here are a few noteworthy alternatives:

in https://npm-compare.com/gridstack,muuri,packery,react-beautiful-dnd,react-grid-layout,vue-grid-layout
Layout Flexibility

should read:
gridstack: Gridstack allows for flexible grid layouts that adapt to various screen sizes, with manual or automatic breakpoint support. It supports nested grids and can easily handle different item sizes, making it suitable for advanced responsive designs.

Integration and Ecosystem

Jquery is LONG gone... we're 1/3 the size and lot more feature and complete TS rewrite since then...

should read:
gridstack: Gridstack is pure typescript with no external dependency. It can be easily integrated with various frameworks and libraries, making one of the few versatile for different projects. It included an Angular component wrapper out of the box, with many React and Vue examples given and more.

How to Choose

Should read:
gridstack: Choose Gridstack if you need a grid layout with drag-and-drop functionality and responsive design. It is particularly suitable for dashboards and applications that require a grid system where items are of different size, need responsive layouts, require more complicated nested layouts, or need to be framework neutral.

Similar Npm Packages to muuri

update with above ones. again not jQuery-based library

and finally, while Gridstack shows 5 alternatives libs (incuding react-beautiful-dnd which is deprecated) NONE of them list GS back other than muuri - which doesn't seem fair. there are some React based user who moved away from react-grid-layout into GS even though I do not currently include a React wrapper, so clearly there are feature/functions missing there... it should absolutely be listed as alternative for dashboard.

[cwtuan]

Hello! I’ve made the requested updates in this PR:

1. The descriptions for gridstack have been revised based on your feedback. You can view the updated content here:

   • Gridstack page
   • Comparison page

2. react-beautiful-dnd has been removed from the comparison list.

3. I’ve also added backlinks to gridstack from each similar package to make it easier for users to navigate related tools.

Please let me know if there’s anything else to adjust!

[cwtuan]

By the way, if you'd like me to remove react-grid-layout from the Gridstack page, please feel free to let me know.

[adumesny]

@cwtuan asking me if a competitor framework should be removed is a loaded question. I have no doubt react based code app would find it (likely why it is 3x more popular), but is good to have the reverse since some users here came from that lib so obvisouly they are missing something.

[adumesny]

you still have these old versions: (see above)

gridstack: Gridstack can be easily integrated with various frameworks and libraries, making it versatile for different projects. It works well with jQuery and other JavaScript libraries.

gridstack: Choose Gridstack if you need a grid layout with drag-and-drop functionality and responsive design. It is particularly suitable for dashboards and applications that require a grid system where users can rearrange items dynamically.

[cwtuan]

@adumesny
I have decided to remove react-grid-layout from the Gridstack page to ensure the comparison remains focused on tools that align more closely with Gridstack's features.

The description has already been updated; the old version you see may be due to your browser's cache. Please try disabling the cache in developer mode.

Here’s a snapshot of the updated Gridstack page:

And here’s the new Comparison page: gridstack vs vue-grid-layout vs muuri vs packery

Please let me know if there’s anything else to adjust!