Aldredcz

Vojtech Prikryl (@productboard)

Delightful Drag and Drop for complex interactive UIs

Drag and Drop is undoubtedly one of the most popular and user-friendly interactions in software nowadays. There are plenty awesome libraries for DnD in React realm, covering most of the use cases. We tried them all at productboard, but realized we need something special for complex interfaces we are building. We developed our own solution that satisfied three main requirements we had:

1. Delightful user experience 🤩
2. Great performance even for large datasets 🏎
3. Reusability of already existing code 🔌

Aldredcz

Notes

• This code handles any JS runtime error during rendering React components. Without this handling, once an error occurs, whole component tree is damaged and can't be used at all. With this handling, nothing will be rendered in production environment (error span in dev env.) + in production the error is logged to Sentry (if you are not using it just delete related code)
• This is basicaly a workaround for proposed feature in React core - described in Issue: facebook/react#2461
• Works for all variants of Component creation - React.createClass, extending React.Component and also stateless functional components.
• To get this work, just put this snippet into your entry js file. Then it will work in whole application.
• Also supporting React Hot Reload!
• If you find this useful, please retweet https://twitter.com/Aldredcz/status/744650159942995968 :)

Ideas

• specify custom error renderer (global / per component, e.g. by implementing method renderOnError() in a comp

Aldredcz

Usable mainly when reducer is more like assembler for your data store changes, and main logic is put into action. So you often need to dispatch multiple smaller action, but to keep it atomic, they have to be processed in a single reduce step. This is the solution. The bonus is, it works well with devTools also.

Sourcecode:

multipleActionEnhancer.js:

export function multipleActionsEnhanceReducer(reducer) {
	return (state, action, ...rest) => {
		if (action.actions && action.actions.type && action.actions instanceof Array) {
			state = action.actions.reduce(reducer, state);
		} else {