Installation Options

Use this libary in your bundled projects, or get going quickly in others using script tags.

Option 1: Using your package manager and bundler

Most often you'll be using a bundler for your React project, and installing with your package manager will be the easiest way to get started.

npm i bs5-react-elements

Important! Bootstrap, and any of its dependencies are NOT bundled with this library. You will need to install Bootstrap and its dependencies yourself.

Example Usage

import React, {useCallback} from "react";
import {Tooltip} from "bs5-react-elements";

function ExampleUsage() {
  const onShownHandler = useCallback(() => {
    console.log("The tooltip has been shown.");
  }, []);

  return <Tooltip
    title="Lorem ipsum dolor."
    data-bs-toggle="tooltip"
    onShown={onShownHandler}
  >
    Lorem ipsum
  </Tooltip>
}

Option 2: Using script tags

This library can also be used with script tags on your webpage. Reference the code either locally, or from a cdn. You'll need to ensure React and Bootstrap (alongside their dependencies) are also included on your webpage.

Example Usage

<!-- include react and react dom -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

<!-- include bootstrap js (this is the bundle version, which includes all its peer dependencies) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js" crossorigin></script>

<!-- include the umd build of bootstrap 5 react elements (this library) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bs5-react-elements.min.js" crossorigin></script>

<script>
  'use strict';

  function ExampleUsage(props) {
    const onShownHandler = React.useCallback(function() {
      console.log("The tooltip has been shown.");
    }, []);

    return React.createElement(
      BS5ReactElements.Tooltip,
      {'data-bs-toggle': 'tooltip', title: 'Lorem ispum dolor.', onShown: onShownHandler},
      'Lorem ipsum'
    );
  }
</script>