Introducing reactjs-popup 🎉 — Modals, Tooltips and Menus — All in one

  • Introducing reactjs-popup 🎉 — Modals, Tooltips and Menus — All in onereactjs-popup Home page article is about giving you a simple overview of what you can do with reactjs-popup and how to use it effectively.Today, we are excited to announce reactjs-popup 1.0.Reactjs-popup is a simple and very small (3 kb) react popup component, with multiple…
  • How can reactjs-popup help you in your next react project?If you need to create a simple modal, tooltip or a nested menu this component is your best choice to start with.
  • It will work correctly with all popular bundlers.npm install reactjs-popup –save#using yarnyarn add reactjs-popup -SNow you can import the component and start using it :import React from “react”;import Popup from “reactjs-popup”;export default () = ( Popup trigger={button Trigger/button} position=”right center” divPopup content here !!
  • /div /Popup);You can also use it with function as children pattern.import React from “react”;import Popup from “reactjs-popup”;export default () = ( Popup trigger={buttonTrigger/button} position=”top left” {close = ( div Content here a className=”close” onClick={close} times; /a /div )} /Popup);Complete component API : Reactjs-popup Component APIUse Cases 🙌ALL in one demoreactjs-popup demo (Modal,tooltip,Menu)What’s…
  • The next version of reactjs-popup will support creating Simple Toast with full customization,But our big deal is to add Animation API to the component so fell free if you have any ideas 💪.Thanks for reading!

Reactjs-popup is a simple and very small (3 kb) react popup component, with multiple use cases.
we created reactjs-popup to create a color picker for our project picsrush a new online image editor…
Continue reading “Introducing reactjs-popup 🎉 — Modals, Tooltips and Menus — All in one”

The Dao of Immutability – JavaScript Scene – Medium

The dao of immutability: The way of the functional programmer  #ReactJS #JavaScript

  • Therefore the wise think before acting, and act only when the thinking is done.If you try to perform effects and logic at the same time, you may create hidden side effects which cause bugs in the logic.
  • A tree cannot grow without water.
  • The foolish create special tools for each new creation.Type-specific functions can’t be reused for data of a different type.
  • Wise programmers lift functions to work on many data types, or wrap data to make it look like what the function is expecting.
  • I have not reproduced the illustration because I don’t believe I could do it justice.

I was wandering the archives of an old library, and found a dark tunnel that led to the chamber of computation. There I found a scroll that seemed to have fallen on the floor, forgotten. The scroll…
Continue reading “The Dao of Immutability – JavaScript Scene – Medium”

Customizing blocks in draft.js. – Lakes Are – Medium

Draft.js custom block rendering  #draftjs #react #javascript #reactjs

  • We can take a look at what contentBlocks our Editor/ has by logging to console.If we seed our editor with h6Hii/h6, it will return, among other stuff, something like this:blocks: [ { // content block text: “Hii” type: “header-six” }, {}, {}]So “header-six” type corresponds to h6 html tag.
  • To determine what content block’s type refers to what html tag, refer to (well, or check it with this codepen).
  • Once again: content block is an object in editor’s state.
  • When Editor/ renders its state into some actual html we are seeing, it will look at content block’s type, map it to some tag (header-six = h6), and show it.What does it even mean to customly render a block?
  • Then Editor needed to transform every content block of contentState to some html tag to display it to us.

blockStyleFn VS blockRendererMap VS blockRendererFn.
Continue reading “Customizing blocks in draft.js. – Lakes Are – Medium”