react-beautiful-dnd
react-i18next
Our great sponsors
react-beautiful-dnd | react-i18next | |
---|---|---|
71 | 71 | |
32,416 | 8,942 | |
1.3% | 1.6% | |
0.6 | 8.8 | |
6 days ago | 7 days ago | |
JavaScript | JavaScript | |
GNU General Public License v3.0 or later | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-beautiful-dnd
-
A feature-rich front-end drag-and-drop component library
Yeah, I hope the migration is not going to be too painful because https://github.com/atlassian/react-beautiful-dnd is a key component in one of my important project
-
Use React.js with Laravel. Build a Tasklist app
For this full-stack single-page app, you'll use Vite.js as your frontend build tool and the react-beautiful-dnd package for draggable items.
-
The 5 Most Important Features on phived.com
A huge win for the user experience using react-beautiful-dnd.
-
Curious case of Drag and Drop
react-beautiful-dnd stands out as the most commonly used, it provides a clean and high-level API with a lot of abstraction. It was developed by Atlassian.
- How can we create drag and drop like bento.me in react js ?
-
Free tools for frontend
Drag-and-drop library for React with beautiful animations. Website - GitHub
-
Is there a react library that allows you to do this? I made the one in the video but I dont know if it's any good
This library is very cool and pretty simple to use : https://github.com/atlassian/react-beautiful-dnd
-
I made a website builder that works like Notion
Not sure if OP used these but here are few suggestions: For drag drop: https://www.npmjs.com/package/react-beautiful-dnd For resizing with handles: https://www.npmjs.com/package/react-resizable
-
Trying to create drag and drop functionality with React from plain JS code
https://github.com/react-dnd/react-dnd https://github.com/atlassian/react-beautiful-dnd
-
How do you implement drag-select using React-DnD?
You can try react-beautiful-dnd, it's amazingly simple, I actually switched from react-dnd a couple months ago to react-beautiful-dnd, and it was easy af.
react-i18next
-
A brief history of web development. And why your framework doesn't matter
> Itโs important to be aware of what you are getting if you go with React, and what you are getting is a far cry from what a framework would offer, with all the corresponding pros and cons.
Would you like to elaborate on that?
In my experience, with something as great, size/ecosystem-wise as React, there will almost always be at least one "mainstream" package for whatever you might want to do with it, that integrates pretty well. Where a lot of things might come out of the box with a framework, with a library I often find myself just needing to install the "right" package, and from there it's pretty much the same.
For example, using https://angular.io/guide/i18n-overview or installing and using https://react.i18next.com/
Or something like https://angular.io/guide/form-validation out of the box, vs installing and using https://formik.org/
Or perhaps https://angular.io/guide/router vs https://reactrouter.com/en/main
Even adding something that's not there out of the box is pretty much the same, like https://primeng.org/ or https://primereact.org/
React will typically have more fragmentation and therefore also choice, but I don't see those two experiences as that different. Updates and version management/supply chain will inevitably be more of a mess with the library, admittedly.
Now, projects like Next https://nextjs.org/ exist and add what some might regard as the missing pieces and work well if you want something opinionated and with lots of features out of the box, but a lot of those features (like SSR) are actually pretty advanced and not always even necessary.
-
Pains and solutions in localization for the web
In a recent project I've been using react-i18next so I'll use its syntax for the examples, but pretty much every library works similarly.
-
45 NPM Packages to Solve 16 React Problems
react-i18next
-
React Ecosystem inย 2024
i18next - You can find documentation and resources for using i18next at react.i18next.com. i18next is a popular internationalization framework for JavaScript, including React. It provides a comprehensive solution for handling translations, formatting, and more.
-
Enforcing Localization through Types
So far, weโve been using a utility createLocalizedString to create and use the LocalizedString type. This utility is only really practical in unit tests. For real applications, weโll want to use a translation function from react-i18next or next-i18next to do the heavy lifting. Then we just wrap the translation functions that are provided in order to use our type:
-
5 Not-So-Typical React Libraries for an Outstanding Project
Website: https://react.i18next.com/
-
Is it a good practice to centralized messages file
If you are talking about handling translations for your application, take a look at https://react.i18next.com/
-
Looking for a few iOS devs that are interested in getting their apps localized.
I will be supporting Korean as a part of the beta. I have to look deeper into https://react.i18next.com/ in order to understand what it provides. My goal is for engineers to be able to click a single button and have localizations always up to date in their codebase, not delaying shipping a new version or having to even think about it.
-
Supercharge Your TypeScript App: Mastering i18next for Type-Safe Translations
With the new react-i18next version, when loading multiple namespaces, t function will infer and accept the keys for the first namespace. So this pattern is now accepted:
-
React Ecosystem in 2023.
react-i18next
What are some alternatives?
react-dnd - Drag and Drop for React
React Intl - The monorepo home to all of the FormatJS related libraries, most notably react-intl.
dnd-kit - The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
next-i18next - The easiest way to translate your NextJs apps.
react-dropzone - Simple HTML5 drag-drop zone with React.js.
jsLingui - ๐ ๐ A readable, automated, and optimized (3 kb) internationalization for JavaScript
react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.
i18next - i18next: learn once - translate everywhere
nested-dnd - Proof of concept for doing a nested drag and drop in React
nextjs-monorepo-example - Collection of monorepo tips & tricks
react-draggable - React draggable component
transloco - ๐ ๐ The internationalization (i18n) library for Angular