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 | | 'Modal Title' | | body | Body of the Component | (() => JSX.Element) | JSX.Element | string | | 'Modal Body' | | 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