@sbjr-react-utils-components/modal

Sbjr-React-Utils-Components - Modal - V2.0.0

Sommaire

---

• Precondition

  • NPM
  • CDN

• Installation

  • NPM
  • CDN

• Usage

  • NPM
  • CDN

• Docs

  • Modal Props
  • TModalType

• Examples

---

Precondition

This module is a React component and uses Styled-Components.

It depends on its two modules, so you must have them installed.

This module depends on another module, @sbjr-react-utils-components/icons, you must also install it.

NPM

npm i -S react styled-components @sbjr-react-utils-components/icons

CDN

As described in the styled-components documentation:

if you use styled-components from CDN, in v5 the "react-is" dependency was added (make sure you add this to your project).

<script crossorigin src="https://unpkg.com/react-is/umd/react-is.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/styled-components/dist/styled-components.min.js" ></script>
<script type="text/javascript" src="https://unpkg.com/@sbjr-react-utils-components/icons@latest"></script>

Installation

NPM

npm i -S @sbjr-react-utils-components/modal

CDN

<script
  type="text/javascript"
  src="https://unpkg.com/@sbjr-react-utils-components/modal@latest"
></script>

Usage

NPM

import React, { useState } from 'react';
import { render } from 'react-dom';
import { Modal } from '@sbjr-react-utils-components/modal';

const App = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false);

  return (
    <>
      <input
        type="submit"
        onClick={() => setModalIsOpen(true)}
        value="Ouvrir"
      />

      <Modal
        title="Titre de la modale"
        body="Contenu de la modale"
        show={modalIsOpen}
        onClose={() => setModalIsOpen(false)}
      />
    </>
  );
};

render(
  <App />} />,
  document.getElementById('react-container'),
);

To access the icons, you must load the css file.

import '@sbjr-react-utils-components/icons/dist/index.css';

If you are using webpack, you will probably have to use loaders like: style-loader, css-loader or url-loader.

You can see an example here.

CDN:

const App = () => {
  const [modalIsOpen, setModalIsOpen] = React.useState(false);

  return (
    <>
      <input
        type="submit"
        onClick={() => setModalIsOpen(true)}
        value="Ouvrir"
      />

      <SbjrRUCModal.Modal
        title="Titre de la modale"
        body="Contenu de la modale"
        show={modalIsOpen}
        onClose={() => setModalIsOpen(false)}
      />
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('react-container'));

To access the icons, you must load the css file.

<link
  rel="stylesheet"
  href="https://unpkg.com/@sbjr-react-utils-components/icons@latest/dist/index.css"
/>

Docs

This package as 1 component:

• <Modal />

1 typescript interface:

• IModalProps

And typescript 1 type:

• TModalType

You can access it by:

import { Modal, IModalProps, TModalType } from '@sbjr-react-utils-components/modal';

Or

const { Modal, IModalProps, TModalType } = window.SbjrRUCModal;

Modal Props IModalProps

Props Name	Description	Type	required	Default Value
className	Class of the Component	string
show	Show Component	boolean	x	false
typeModal	Style of the Component	TModalType		information
title	Title of the component	`(() => JSX.Element)	JSX.Element	string`
body	Body of the Component	`(() => JSX.Element)	JSX.Element	string`
footerElements	List of footer elements	`Array<(() => JSX.Element)	JSX.Element	string>`
onClose	Function called when want to close the modal	() => void

TModalType

Value
warning
danger
success
information

Examples

Examples can be found here and here.

Have fun