Nowadays, Modals are one of the most used components in React Application, having an easy way to create React Modals will help you sheep Modals related features fast in your upcoming React Applications. In this tutorial, we will build A simple React Modal using only 22 lines of code. The gif below will help you understand what we are trying to build Let's started Create React Project First, create a simple react project using create-react-app CLI. $ npx Create-react-app SimpleModal React ; ReactDOM ; ; { ( <h1>Create React Modal in X line of code </h1> <button>Click Me</button> );
} rootElement = .getElementById( );
ReactDOM.render( import from "react" import from "react-dom" import "./styles.css" ( ) function App return < = > div className "App" </ > div const document "root" , rootElement); < /> App In this tutorial, we will use the package  which is a simple and Powerful react component with a lot of benefits : react-popup Modal, Tooltip, Menu: All in one 🏋️ Full style customization 👌 Function as children pattern to take control over your popup anywhere in your code. 💪 IE Support. 🚀 TypeScript Support 👌 All these clocks in at around 3 kB zipped. ⚡️ This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers. $ yarn add reactjs-popup Create React Modal Import Component from reactjs-popup and start using it like the following. Popup Add property as a simple React Button element and set property to true. trigger modal React ; ReactDOM ; Popup ; ; { ( <h1>Create React Modal with 22 line of code </h1> <Popup modal trigger={<button>Click Me</button>}>
        Modal Content
      </Popup> );
} rootElement = .getElementById( );
ReactDOM.render( import from "react" import from "react-dom" import from "reactjs-popup" import "./styles.css" ( ) function App return < = > div className "App" </ > div const document "root" , rootElement); < /> App Customizing and Styling  React Modal we need to create a file for Modal Content component and add some style Content.js React ; ({ close }) => ( <a className="close" onClick={close}>
      &times;
    </a> <div className="header"> Modal Title </div> <div className="content">
      {" "}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
      Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
      delectus doloremque, explicabo tempore dicta adipisci fugit amet
      dignissimos?
      <br />
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
      commodi beatae optio voluptatum sed eius cumque, delectus saepe
      repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias.
      Vitae?
    </div> ); //content.js import from "react" export default < = > div className "modal" </ > div { : ;
} > { : ; : solid gray; : ; : center; : ;
} > { : ; : ;
} > { : auto;
} > { : ; : ; : center;
} > { : pointer; : absolute; : block; : ; : ; : - ; : - ; : ; : ; : ; : solid ;
} /* index.css */ .modal font-size 12px .modal .header width 100% border-bottom 1px font-size 18px text-align padding 5px .modal .content width 100% padding 10px 5px .modal .actions margin .modal .actions width 100% padding 10px 5px text-align .modal .close cursor position display padding 2px 5px line-height 20px right 10px top 10px font-size 24px background #ffffff border-radius 18px border 1px #cfcece Now it's time for some magic Because provides a child as function pattern, you have full control on Popup state reactjs-popup we will update our example to use a function as a child instead of a  react element to implement `close` button. React ; ReactDOM ; Popup ; Content ; ; { ( <h1>Create React Modal with 22 line of code </h1> <Popup modal trigger={<button>Click Me</button>}>
        {close => <Content close={close} />}
      </Popup>
    </div> <App /> //index.js import from "react" import from "react-dom" import from "reactjs-popup" import from "./Content.js" import "./styles.css" ( ) function App return < = > div className "App" );
}

const rootElement = document.getElementById("root");
ReactDOM.render( , rootElement); Final Result reactjs-popup : https://react-popup.elazizi.com/ Repo : https://github.com/yjose/create-react-modal-with-22-line-of-code Codesandbox : https://codesandbox.io/s/create-react-modal-with-22-lines-of-code-v2u7t Make sure to visit react-popup home page Thanks for reading! If you think other people should read this post and use this project, tweet, and share the post. Remember to follow me, so you can get notified about my future posts.

Create React Modal using reactjs-popup

If you’ve been in the cryptocurrency and blockchain community for a while, then you’ve surely heard the phrase “we just need a killer app” to get crypto into the mainstream. Now, as you’ve most likely also noticed, many of the current decentralized applications that are out there have great ideas backing them — perhaps even revolutionary ones — so why aren’t any of these dApps achieving widespread use? Why aren’t they, or one of them, the “killer app” that we need? I certainly don’t think the gambling dApps topping the would constitute such an app. daily usage tracking charts The answer to why none of the current dApps represent the “white whale” of killer apps isn’t complex, nor is it especially intriguing. It’s actually quite simple. Most everyday users just don’t understand how the dApps work, or they feel as if there’s too great a barrier to use the product. Let’s look at an example. Say Alice wants to play a game built on Ethereum; before she even grazes the first level, she’ll have to set up a web 3 application such as MetaMask, writing down a mnemonic phrase to set up a wallet. After this lengthy exercise, she might also even need to acquire ETH in order to interact with the platform’s smart contracts. If I was Alice and completely new to crypto and its benefits, I’d probably play just about any other game. This is obviously an issue, so how do we solve it? The “Just Improve UI/UX” Silliness The solution of improving UI/UX is the typical suggestion, and in my personal opinion, it’s silly. Of course improving UI/UX would help, however, how can we improve upon the most basic functions which blockchain requires? Without requiring the user to set up a private key, or requiring them to interact with a pre-existing key, platforms would not be dApps. They would be centralized, with databases storing passwords, and they would be no different to any other traditional platform. The dApp debate is often centered around UI/UX when in reality the debaters themselves don’t even use the dApps they’re discussing; we’re all hypocrites. Yes, we need to make UI/UX as good as possible, and yes, we also need to use the dApps we’re so zealously championing for — however, the debate should really be centered around driving both marketing and education to create use instead of rehashing the “improve UI/UX and users will come” argument. We need the public to realize the benefits of blockchain and why they should chose the decentralized option over the traditional one, even if it costs them a few more cents in transaction fees and a few more minutes of their time. We need to educate about the value of personal information and data — — and we also need to create platforms which provide genuine value to everyday users. The good part of it all is that if we educate and successfully get users to create a private key for their first dApp, then they’ve already bypassed the most difficult barrier to entry to the entire ecosystem, and they can use that key for all future dApps without necessarily requiring a new one. the oil of the digital age As a side-note, it’s not uncommon to see games being mocked for not creating “real” value with blockchain, however, isn’t entertainment value a great way to educate and draw in users?  We should not discount games’ ability to be a killer app, in fact, it could very well be a game that achieves “mass adoption.” Gamers, although a broad term, are generally speaking amongst the first adopters of technology. Of Sheep and Wolves As established, dApps have a barrier of entry problem. The problem with a higher barrier of entry, both one of knowledge and potentially price, is that traditional platforms will almost always beat the dApps; in speed, costs, and knowledge required to get started. The masses trend towards that which is easiest and cheapest, regardless of “hidden” costs taxed from their data, and ultimately freedom if we let the privacy threats get out of hand. This is why we, the cryptocurrency community at large, need to be superior in every category where we can be superior. We must create solid alternatives to traditional platforms, and we must do our very best to educate fellow users and citizens of the ongoing threat to privacy and freedom itself. Thankfully, Facebook is being kind enough to assist the crypto space by thoroughly marketing how bad their centralized platform is through their, at this point, . Let’s capitalize on the scandals through education instead of mockery and misery; instead of wallowing about the potentially bleak future, we must instead attempt to prevent a monopolization of privacy through education about decentralization, and bringing power back to the individual. countless scandals The Next Steps The core fundamentals of blockchain won’t change, and as such, we shouldn’t expect “just fixing UI/UX” to be the solution to all of our problems. In order to facilitate the growth of the sought after “killer app”, let’s allow the builders to create great apps, and let’s allow the educators and marketers to spread knowledge of blockchain technology. By decreasing the barrier of entry through the spread of knowledge whilst at the same time creating dApps with real and proper value,  the ecosystem of dApps could flourish. The recent Senate Banking Commission hearings have been an example of how, and through which mediums, we can present and educate about blockchain and cryptos as an alternative to centralization and tyranny, which in the case of these hearings was represented by Libra, further explored in . another article I wrote recently To summarize; the “killer app” won’t suddenly arrive through improving UI/UX. The killer app can only exist in an environment in which blockchain education flourishes. Due to this, we must look away from UI/UX as the sole issue, and instead, our focus must shift towards education as an equal cornerstone in achieving mass adoption for dApps.

Dapp

Facebook

fees

Follow me on Twitter!

Read My Stories

Why dApps aren't as doomed as you think

‘Big Tech’ are coming for our banks, but should we be worried? Digital currencies are back in the spotlight as US regulators at Facebook’s lofty plans. take swing Last week David Marcus, head of Facebooks ‘Cailibra’ project and former president of Paypal testified before the US government for their proposed digital currency ‘Libra’, which according to David Marcus, is intended to address : an important problem “Imagine a daughter who wants to send money home to her mum in another country. Of the $200 she sends, $14 on average will be lost because of fees. It can also take several days or even weeks for the mother to receive the money. A delay that can prove disastrous in an emergency. Not to mention lines may be long, and collection points may be in high crime areas.” Captured in a small village close to Tangier, Morocco: People line up to use the only ATM in town. So What is Libra? One big advantage is that payments in Libra will be available on both existing payment rails (i.e. card terminals), and also by scanning barcodes via your smart phone. The currency will be maintained by a distributed ledger, empowering users to take custody of their own funds, initially in the online. This means your smartphone can become your bank account, killing the need for a retail bank entirely. Libra will be a stable currency that can be used for payments and other financial activities around the world. Calibra wallet Today in the world remain unbanked, with women making up a higher percentage of those than men. Indeed many countries around the world have poor access to financial services that involve long lines at ATMs & Banks, limited access to credit, high borrowing rates and more. 1.7 billion adults Libra aims to lower the barriers of entry to financial services by requiring only a smartphone, and reducing the costs of commerce with distributed ledger technology. monthly active Facebook users, its easy to see how Libra could be integrated into the everyday lives of so many people. With access to 2.38 Billion Governments Don’t Like Libra Before Facebook’s announcement, banks and governments weren’t threatened by digital currencies. Many of the projects that exist today simply aren’t as equipped to take on the world. But Facebook is a centralised company, and must cooperate with local authorities in each jurisdiction (unlike Bitcoin). This is one reason why Facebook was careful to keep separate the Libra foundation from its US counterpart. Facebook also has a terrible reputation, with authorities around the world unhappy with the size and power they already have. Not to mention their track record of that have rigged democratic processes and proliferated the spread of ‘fake news’. scandals Despite its challenges, Libra, if successful could be a popular option for those who suffer from poor local banking experiences and an inflationary local currency. Certain governments will increasingly see Libra as a threat to both Central Bank policy and retail banking industries and so it’s likely that central banks with the most to lose from Libra will be the first ones to oppose the use of it in their countries. Anti Money Laundering One of the major themes of the recent US government hearings has been Money Laundering and the perceived risks associated with digital currencies. US Treasury Secretary Steven Mnuchin that Libra could be used by terrorists and money launderers, a narrative often used to argue against the merits of Bitcoin and other digital assets. While these concerns are valid, he added that regulators are open to digital currencies so long as these risks are managed, and that Libra has a long way to go to prove this. expressed his concerns But as far as digital currencies go, how concerned should we really be about money laundering and terrorist financing? Should they be treated any differently to cash? One interesting statistic shared by Steven Mnuchin in his recent discussed the progress that has been made in combating anti-money laundering & terrorism with the Banking Secrecy Act: cryptocurrency press conference "Last year alone, it (Fincen) collected over 20 million BSA reports ct Reports), and has collected over 300 million in the last 11 years." (Banking Secrecy A In , , a corporate finance expert and long standing advocate for digital currencies cited on the cost of the Banking Secrecy Act, stating the most recent publicly available data for these figures is from 2006, in which it was reported that 16 million BSA reports had been collected, resulting in a total of Her interpretation being that BSA reports had increased from 16 million (2006) to 20 million per year (2018, as per Mnuchin’s recent statement) which isn’t a significant difference. The conclusion of her 2006 analysis was that 296 convictions is a small outcome for the extra costs and efforts that went into collecting 16 million BSA reports. a recent interview Caitlin Long her 2018 piece 296 anti-money laundering convictions. In other words, decades of costly fees for consumers, sensitive data breaches, and non-existent innovation in financial services may be getting traded in for a sobering number of yearly convictions. While anti-money laundering and terrorist financing are important, it shouldn’t be so taboo to ask fair questions about how we can balance this with improvements in the user experience of money, especially if these risks are overblown. Libra will Not be Open and ‘Permissionless’ Networks like Bitcoin and Ethereum are open and permissionless, which means anyone with a computer and internet connection can contribute to the network by or . running a ‘node’ adding proposals to it’s open source development This is a core design feature that promotes egalitarian access whilst also giving the network resistance to censorship and control. The recent hearings have made it clear that Libra will not benefit from these properties and will in turn prioritise the needs of the corporations and regulators involved rather than its users. Some points we can confirm from the hearings are: The Libra foundation will control who can join the network as a ‘Node’. The Libra network will have an anti-money laundering program. The Libra network will report directly to the Internal Revenue Service (IRS). Still, Libra has impressive shared in its white paper and technical papers. Its network will have its own programming language called ‘Move’ that will allow invited members to build applications and extend the use cases of Libra. technical details It’s likely that Facebook will encourage third parties to build new financial services on top of Libra, including tools for lending and saving, all without the need for a bank. Conclusion Countries that are weighed down by the limitations of cash, bad central bank policy, and poor retail banking experiences have the most to gain from Libra. Ironically, these countries are also the most likely to ban Libra as it directly reduces the influence and control they have over their own banking systems. Anti-money laundering practices are a major bottle neck for global commerce. If Facebook gets this right it could significantly reduce the costs of financial services which would in turn create more equal opportunities for the un-banked and under-banked. It could also promote competition among retail banking in first world economies. Libra will not be open and permissionless. If Libra becomes mainstream it will be interesting to see if these limitations cause users to migrate to more open networks. _________________________________________________________________ I collect my information from a variety of sources linked throughout the article. My interpretation of these sources are my own opinions. The information provided is for general use only. All images are either my own or have been sourced through Adobe Stock . If you have anything to add or feel that any sources could be improved, please comment below. If you enjoyed this article please clap on the left! Follow me on Twitter — https://twitter.com/adrianciaff Retweet on twitter or share on your favourite platform!

HackerNoon Tech Stories Archive July 28th, 2019

Create React Modal using reactjs-popup

@youssoufelazizi
youssoufelazizi

Why dApps aren't as doomed as you think

@Joakim
Joakim Hjønnevåg

Facebook’s Libra Currency

@Hackern00n457
Adrian

HackerNoon Tech Stories Archive July 28th, 2019

Create React Modal using reactjs-popup

@youssoufelaziziyoussoufelazizi

Why dApps aren't as doomed as you think

@JoakimJoakim Hjønnevåg

Facebook’s Libra Currency

@Hackern00n457Adrian

@youssoufelazizi
youssoufelazizi

@Joakim
Joakim Hjønnevåg

@Hackern00n457
Adrian