Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences. Draft.js makes it easy to build any type of rich text input, whether you’re just looking to support a few inline text styles or building a complex text editor for composing long-form articles. https://draftjs.org/
By default ES6 modules in create-react-app use relative paths. But using relative paths is a real pain when you start dealing with deeply nested tree structures because you end up with dot-dot syndrome. After digging through a bunch of github issues I was finally able to boil down the steps required to implement absolute imports …
When we change the state or props of the component, render method is called by default. In order to prevent this behavior, we can use shouldComponentUpdate method. If we return false from this method, render is not called. This method receives props and state as parameter so we can check if certain state or props …
A simple pan and zoom for canvas like elements in react. Normally zoom libraries zoom in/out only images but this library can zoom in/out any html element. https://github.com/ajainarayanan/react-pan-zoom
http://react-component.github.io/tree/examples/draggable.html we can implement online tree functionality simply.For example: all of IDE has file tree structure. We can implement it by the react component online.
react-beautiful-dnd is drag and drop library for react.js, developed by Atlassian. There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly …
react-rails(react-ujs) is a convenient and easy way to use react.js on ruby on rails projects.Using this gem/npm combo, we can add react.js boiler plate structure and generate components easily. Running rails server with rails s, will compile react webpack as well.
Full screen scrolling with React DEMO Props initialSlide defaults to 0 duration – scroll duration [ms] defaults to 700 controls defaults to false true adds built-in controls Pass React component if you want to use your own controls controlsProps additional props for controls component beforeChange callback executed before scroll afterChange callback executed after scroll scrollMode full-page or normal – defaults to full-page Both beforeChange and afterChange will receive as parameter an object like: { “from”: 0, // the index of the slide react-full-page is scrolling _from_ “to”: 1, // the index of the slide react-full-page is scrolling _to_} …
A React modal with animations. http://chenjiahan.github.io/rodal/ Installation React 15/16 React 0.14 Usage Props Property Type Default Description width number 400 width of dialog height number 240 height of dialog measure string px measure of width and height onClose func / handler called onClose of modal onAnimationEnd func / handler called onEnd of animation visible bool …