react-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React

  •        85

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo. The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

http://jrowny.github.io/react-absolute-grid/demo
https://github.com/jrowny/react-absolute-grid

Tags
Implementation
License
Platform

   




Related Projects

rsuite - :package: A suite of React components .

  •    Javascript

RSUITE (React Suite) is a set of react component libraries for enterprise system products. Built by HYPERS front-end team and UX team, mainly serving company's big data products. After three major revisions, a large number of components and rich functionality have been accumulated.

storybook - UI component dev & test: React, Vue, Angular, React Native, Ember, Web Components & more!

  •    TypeScript

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

react-controllables - Easily create controllable components

  •    Javascript

If you've worked with forms in ReactJS, you're probably familiar with the idea of controlled and uncontrolled components. Put simply, controlled components have their state controlled by another component whereas uncontrolled components manage their own state. It turns out that this idea can be really useful for custom components too. Everything is fine until one day when the designer of your site decides to add another component to the page that also changes the selected tab. Now you've got a problem: you need to hoist the state to a higher level so it can be shared between the two components.


react-lifecycle-visualizer - Real-time visualizer for React lifecycle methods

  •    Javascript

An npm package (react-lifecycle-visualizer) for tracing & visualizing lifecycle methods of arbitrary React components. To trace a component, apply the higher-order component traceLifecycle to it, and all its lifecycle-method calls will show up in a replayable log component. Additionally, traced components may include a <this.props.LifecyclePanel/> element in their rendering to show a panel with lifecycle methods, which are highlighted when the corresponding log entry is selected.

react-powerplug - :electric_plug: Renderless Containers

  •    Javascript

React PowerPlug is a set of pluggable renderless components and helpers that provides different types of state and logic utilities that you can use with your dumb components. It creates state and passes down the logic to the children, so you can handle your data. Read about the Render Props pattern.

react-game-kit - Component library for making games with React & React Native

  •    Javascript

react-game-kit provides a set of helper components to make it easier to create games with React and React Native.The Loop component uses context to pass a subscribable game tick down your component tree. The Stage component does the same with game scale.

babel-plugin-react-transform - Babel plugin to instrument React components with custom transforms

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. This plugin wraps React components with arbitrary transforms. In other words, it allows you to instrument React components in any way—limited only by your imagination.

rebass - :atom_symbol: React UI component library & design system, built with styled-components and styled-system

  •    Javascript

React UI component library & design system, built with styled-system, with support for styled-components & emotion. Rebass is a library of highly-composable, primitive UI components for React, built with styled-components to keep styles isolated and reduce the need to write custom CSS in your application. Based upon a configurable design system, Rebass‘s props API makes building consistent, responsive web apps simpler and faster.

light-bootstrap-dashboard-react - React version of Light Bootstrap Dashboard

  •    CSS

Light Bootstrap Dashboard React is an admin dashboard template designed to be beautiful and simple. It is built on top of React Bootstrap, using Light Bootstrap Dashboard and it is fully responsive. It comes with a big collections of elements that will offer you multiple possibilities to create the app that best fits your needs. It can be used to create admin panels, project management systems, web applications backend, CMS or CRM. The product represents a big suite of front-end developer tools that can help you jump start your project. We have created it thinking about things you actually need in a dashboard. Light Bootstrap Dashboard React contains multiple handpicked and optimized plugins. Everything is designed to fit with one another. As you will be able to see, the dashboard you can access on Creative Tim is a customization of this product.

react-fontawesome - A React Font Awesome component.

  •    Javascript

A React component for the font-awesome icon library. Note: This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions.

react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules

  •    Javascript

react-flexbox-grid is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.react-flexbox-grid imports the styles from flexboxgrid, that's why we're configuring the loader for it.

react-templates - Light weight templates for react

  •    Javascript

Lightweight templates for React. React Templates compiles an *.rt file (react template file - an extended HTML format) into a JavaScript file. This file, which uses AMD syntax, returns a function. When invoked, this function returns a virtual React DOM based on React.DOM elements and custom user components.

mobx-react-lite - Lightweight React bindings for MobX based on React 16.8 and Hooks

  •    TypeScript

This is a next iteration of mobx-react coming from introducing React hooks which simplifies a lot of internal workings of this package. Class based components are not supported except using <Observer> directly in class render method. If you want to transition existing projects from classes to hooks (as most of us do), you can use this package alongside the mobx-react just fine. The only conflict point is about the observer HOC. Subscribe to this issue for a proper migration guide.

react-designer - Editable vector graphics in your react components.

  •    Javascript

Easy to configure, lightweight, editable vector graphics in your react components. All the entities are pure react components except action strategies in react-designer. I have tried to explain that. I'm starting with components.