Create Reusable Cards, Popups or Modals In React – cardon

cardon is a JavaScript library for React that enables you to create reusable asynchronous functional cards, popups, or modal windows in apps.

How to use it:

1. Install the library with NPM.

# Yarn
$ yarn add cardon

# NPM
$ npm i cardon

2. Basic usage.

// app.js
function App() {
  return (
    <div>
       <Main />
       <CardonContainer />
    </div >
  );
}
// MyModalCard.jsx
export default App;
import { withCardon } from "cardon";
import React from "react";
function MyModalCard({ visible, get, title }) {
  return (
    <Modal open={visible} onClose={get(null)}>
      My Reusable '{title}' Modal!
      <button onClick={get(true)}>Yes</button>
      <button onClick={get(false)}>No</button>
    </Modal>
  );
}
export default withCardon(MyModalCard);

Preview:

Create Reusable React Cards, Popups or Modals In React - cardon

Download Details:

Author: hepter

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/hepter/cardon

License: MIT

Add Comment