LegendaryMediaTV Bootstrap

This is a Node.js package for extending React Bootstrap (which is based on Bootstrap 5) and Gatsby 3 or 4. It also has components for class-based icons (i.e., FontAwesome, Bootstrap icons, etc.).

Recent changes

- v4.1.0
- updated the peer dependency for Gatsby to include 5.x
- v4.0.0
- upgrated to FontAwesome 6 for the default icon names
- updated FontAwesome reference to 6.1.1
- updated Bootstrap Icons CSS reference to 1.8.2
- v3.5
- updated the peer dependency for React to 17.x or 18.x
- v3.4
- added a new component with title and subtitle properties
- added with title/subtitle to the
- made component not print
- bugfix for component not showing subitem when subactions property is set
- v3.3
- added an component with title, subtitle, and error properties
- made the utilize the new component
- v3.2
- added a component with subitem and subactions properties
- added a sleep() function
- v3.1
- added a component that uses our Gatsby-friendly component
- made the component more robust
- added a title property to the component
- bugfix for opening internal links in a new tab when requested
- bugfix for the default italics class on displaySubClassName
- updated the peer dependency for React Bootstrap to 2.x, since 2.0 stable released
- updated the peer dependency for Gatsby to 3.x or 4.x
- updated Bootstrap CSS reference to 5.1.3

For more information, check out the release notes and the changelog.

Getting started

$3

Install peer dependencies (if they aren't already).

``JavaScript npm install react react-dom react-bootstrap gatsby`

Optionally, install React Helmet (useful for linking Bootstrap resources).

`JavaScript npm install react-helmet`

Install this package.

`JavaScript npm install @legendarymediatv/bootstrap`

> _NOTE: if you are still using Bootstrap 4.6.x and React Bootstrap 1.6.x, then you can use version 2.13.1 of this package, however, it is not continuing to be maintained_

`$3`

Modify the Babel loader to transpile JSX for this package.

> _NOTE: not configuring this will result in the following error when running gatsby build: ERROR #98123 WEBPACK – Generating development JavaScript bundle failed: Unexpected token_

Sample /gatsby-node.js

`JavaScript exports.onCreateWebpackConfig = ({ actions, loaders, getConfig }) => { const config = getConfig(); config.module.rules = [ // omit the default rule where test === '\.jsx?$' ...config.module.rules.filter( (rule) => String(rule.test) !== String(/\.jsx?$/) ), // re-create it with custom exclude filter { // apply required Babel presets/plugins and merge in your configuration frombabel.config.js. ...loaders.js(), test: /\.jsx?$/, // exclude all node_modules from transpilation, except for this plugin // NOTE: their pattern has "\/" but this has "[\\\/]" to support all OS path separators exclude: (modulePath) => /node_modules/.test(modulePath) && !/node_modules[\\\/]@legendarymediatv[\\\/]bootstrap/.test(modulePath), }, ]; // replace the webpack config with the modified object. actions.replaceWebpackConfig(config); };`

Either import Bootstrap CSS or link Bootstrap into your layout or app file.

Sample /src/components/Layout.js (link, with FontAwesome)

`JavaScript import React from "react"; import { Helmet } from "react-helmet";

import Container from "react-bootstrap/Container";

const Layout = (props) => { return ( <> {props.title}

rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

`{props.title}`

{props.children} ); };

export default Layout;`

Finally, import the components as needed into your app/components.

Sample /src/pages/index.js

`JavaScript // dependencies import React from "react";

// page layout template import Layout from "../components/Layout";

// sample LegendaryMediaTV component import Icon from "@legendarymediatv/bootstrap/Icon";

const SamplePage = () => { return ( ); };

export default SamplePage;`

`Components`

> _NOTE: components can be imported at the package level or at the component level_

`JavaScript // package-level import { Demo } from '@legendarymediatv/bootstrap';

// component level (preferred) import Demo from '@legendarymediatv/bootstrap/Demo';`

`$3`

An extension of React Bootstrap’s component, but with the ability to set a title, subtitle, and/or error. It provides as is, but converts their to our Gatsby-friendly component.

`JavaScript import Alert from '@legendarymediatv/bootstrap/Alert';

…

title="Alert Title" subtitle="Alert subtitle" variant="info" onClose={() => { alert("Insert dismiss logic here"); }} dismissible > Some text with a link

error={{ error: "Request failed with status code 401", url: "/", method: "GET", }} onRetry={() => { alert("Insert retry logic here"); }} />

In addition to the properties provided by React Bootstrap’s component, the following additional properties are available:

| Name | Type | Default | Description | | :--------- | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | |error | JSX \| object | | either a JSX component or an object containing keys for error/message and optionally url and/or method| |onRetry | function | | when defined, a retry } frontClassName="d-flex align-items-stretch" back={ onClick={flipHandler} variant="secondary" className="w-100" > click to flip to the front } backClassName="d-flex align-items-stretch" className="text-center" height="10rem" flipped={componentState} horizontal />`

> _NOTE: if flipped is null, then doesn’t toggle aria-label for the flipper sides, because it flips on an untracked hover action rather than an event_

`$3`

An extension of React Bootstrap’s , which automatically contains a React Bootstrap . The label then optionally includes a when the info property is set.

`JavaScript import FormGroup from '@legendarymediatv/bootstrap/FormGroup';

…

title="Sample textbox" info={

Things, stuff, content!

}
>
      name="sample"
    maxLength="80"
    defaultValue="eleventeen"
  />

`$3`

Make your page always use at least the full height of the browser window using flexbox instead of fixed/sticky styling. Plus, it has a footer component that will display at the bottom of the page without forcing a scrollbar!

This component set doesn't have any special properties, but it is made up of three parts:

- – the wrapper (should only contain the other FullPage components below) - (required) – page content (should contain your and page copy components such as

)
-

(optional) – page footer (can be styled directly or given an id and styled elsewhere)

`JavaScript import FullPage from '@legendarymediatv/bootstrap/FullPage';

…

Page Content Footer Content`

Containerized example:

`JavaScript


  
    
      
        
          LegendaryMediaTV
        
        

          Title or whatever

          Things, stuff, content!

        

      
      
        Footer Content

> _NOTE: if using React Helmet, you can use its bodyAttributes property instead of a

wrapper to set the main background color:

_
$3

Class-based icon ( tag) that can automatically add an ARIA label based on the icon name.

`JavaScript import Icon from '@legendarymediatv/bootstrap/Icon';

…

name="fa-solid fa-camera" alt="DSLR" variant="success" className="ms-3" style={{ fontSize: '2rem' }} />`

`$3`

An extension of React Bootstrap’s (with rootClose set to auto-close when it loses focus) that contains an .

`JavaScript import InfoIcon from '@legendarymediatv/bootstrap/InfoIcon';

…

Info Content

title="Info Title" name="bi bi-info-circle-fill" alt="help me!" variant="danger" iconStyle={{ fontSize: "2rem" }} > Things, stuff, content!`

`|` as`property for the popover title | |`variant `| string |` info`| Bootstrap theme color name applied to the icon | $3`
`A combination of an HTML` `tag and Gatsby’s` `. It mostly uses the normal` `tag properties, but accepting either` href `or` to `in order to set the URL, so that you can simply swith the import of Gatsby’s` `to this one instead, plus you can set the` as `property for any React Bootstrap to be this component so that links work properly in Gatsby.`
`If` href `property begins with` # `(i.e., anchor), a protocol (e.g.,` https:// `or` mailto:`), or ends with a file extension (e.g.,` sample.jpg`), or` external `is set, then it uses an` `tag. Otherwise, it uses Gatsby’s` `tag, so that it doesn’t force a page reload.`
``JavaScript import Link from '@legendarymediatv/bootstrap/Link';`
`…`
`Gatsby link`
`HTML link`
`auto-external HTML link`
`href="/external-somehow" externalIcon="bi bi-box-arrow-up-right" externalVariant="danger" > HTML link with custom external icon and color`
`LegendaryMediaTV`
`Home``
`| Name | Type | Default | Description | | :------------------ | :-------------- | :------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- | |`href `\|` to`| URL | required | URL or anchor target | |`external `| boolean |` true `if the URL starts with` http: `or` https: `or` externalIcon `is set | explicitly (un-)flag an external link icon (also forces an` `tag when enabled), which goes inside its own` `tag | |`externalNewTab `| boolean |` false `| set` newTab `to` true `when` external `is` true`| |`externalIcon `| icon class name |` 'fa-solid fa-arrow-up-right-from-square'`| external icon class name | |`externalVariant `| string |` info `| Bootstrap theme color name (e.g.,` 'primary'`) applied to the icon | |`externalClassName `| string |` 'small ps-1 align-text-top' `|` className `property for the` `(i.e.,` className`is applied to the toggler button) | |`externalStyle `| object | |` style `property for the the` `(i.e.,` style`is applied to the toggler button) | |`newTab `| boolean |` false `| force the link to open in a new tab (sets` target="_blank" rel="noopener"`) |`
`$3`
`An extension of` `React Bootstrap’s` `that has a title, accepting arrays of URL strings and arrays of obects as items. If the item has a URL, then it is rendered as our Gatsby-friendly` `component, otherwise it is rendered as our` `instead.`
``JavaScript import ListGroup from '@legendarymediatv/bootstrap/ListGroup';`
`…`
`const linkArray = [ '/test', '/sample' ]; …`
`…`
`const linkObjects = [ { title: 'Test Link', url: '/test' }, { title: 'Sample Link', subtitle: "additional information in a subtitle", url: '/sample' } ]; …`
`…`
`function sampleHandler(itemSelected) { alert(JSON.stringify(itemSelected, null, 4)); } … const objectArray = [ { id: 1, title: 'Test Non-Link' }, { id: 2, title: 'Sample Non-Link' } ]; … title="Array of Objects with Click Handler" titleVariant="success" items={objectArray} click={sampleHandler} className="mt-3" />``
`| Name | Type | Default | Description | | :-------------------- | :--------------------------------------------- | :---------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------- | |`activeKey `| unknown | inherited |` activeKey`property | |`as `| elementType | inherited |` as`property for the list group | |`defaultActiveKey `| unknown | inherited |` defaultActiveKey`property | |`horizontal `|` true `\|` 'sm' `\|` 'md' `\|` 'lg' `\|` 'xl' `| inherited |` horizontal`property | |`onSelect `| function | inherited | when` items `is an array of objects, this is the` onClick`callback function that passes the clicked item as an argument | |`variant `| 'flush' | inherited |` variant`property | |`displayField `| string |` 'title' `| when` items`is an array of objects, this is the object field to display | |`displaySubField `| string |` 'subtitle' `| when` items `is an array of objects, this is the object field to subtly display below the` displayField`| |`displaySubClassName `| string |` fst-italic small text-muted `| when` items `is an array of objects, this is the` className `property for the` displaySubField`| |`items`| string[] or object[] | required | array of URL strings or an array of objects | |`itemsAs `| elementType | inherited |` as`property for the list group items | |`keyField `| string |` 'id' `| when` items`is an array of objects, this is the object field to use as the React list key; otherwise it just uses the array index as the key | |`title`| string | | list group title | |`titleAs `| elementType |`
`|` as`property for the list group title | |`titleVariant `| string |` 'primary'`| Bootstrap theme color name for the list group title | |`titleClassName `| string | |` className`property for the list group title | |`titleStyle `| object | |` style`property for the list group title | |`urlField `| string |` 'url' `| when` items`is an array of objects, this is the object field to use as the link URL | $3`
`An extension of React Bootstrap’s` `that adds support for sub-items, sub-actions, auto-conversion to a Gatsby-friendly` `when a URL is provided, and auto-conversion to an action when a URL or click handler are defined.`
`The` subactions `property should be an array of objects corresponding containing` `properties.`
``JavaScript import ListGroup from '@legendarymediatv/bootstrap/ListGroup';`
`…`
`title="ListGroup with items" titleVariant="info" > ListGroup.Item with a sub-item below`
`ListGroup.Item auto-converted to a link/action`
`onClick={() => { alert("clicked"); }} > ListGroup.Item auto-converted to a button`
`to="#list-group" subactions={[ { to: "/sample", variant: "info", children: , }, { onClick: () => { alert("deleted!"); }, variant: "danger", children: , }, ]} > ListGroup.Item with a URL and sub-actions``
`| Name | Type | Default | Description | | :----------------- | :--------------- | :------------------------------ | :--------------------------------------------------------------------------------------------------------- | |`action `| boolean | inherited /` true `| marks the item as actionable; will be set to` true `when` href `/` to `/` onClick`are defined | |`active`| boolean | inherited | marks the item as active | |`as `| elementType | inherited /` Link `|` as `property for the item; becomes our Gatsby-friendly` Link `when the` href `or` to`property is defined | |`children `| JSX | | content for the main list item (will be nested if` subactions`property is set) | |`disabled`| boolean | inherited | marks the item as disabled | |`eventKey`| string \| number | inherited | unique identifier for when using events | |`href `\|` to `| URL | | URL or anchor target for the` `| |`onClick`| function | | fired when the item is clicked | |`subitem `| JSX | | to subtly display below the` children`| |`subitemClassName `| string |` 'fst-italic small text-muted' `|` className `property for the` subitem`| |`variant `| string | | Bootstrap theme color name (e.g.,` 'primary'`) |`
`$3`
`Basically a rebuild of React Bootstrap’s` `and` `components, but based off of our` `component (in order to be Gatsby-friendly).`
`Sub-components include:`
`-` `– creates a pagination item containing a` `or` `
`$3`
`Promise-based wrapper for JavaScript’s` setTimeout() `function, allowing your script to pause using` await `or` .then() `syntax.`
``JavaScript import { sleep } from '@legendarymediatv/bootstrap/functions';`
`…`
`// wait one second and then do something sleep(1000) .then(() => { // do something });`
`function async sample() { // do something`
`// wait 1/4 second await sleep(250);`
`// do something else }``
`| Name | Type | Default | Description | | :------------- | :------ | :------- | :----------------------------- | |`milliseconds `| integer | required | number of milliseconds to wait |`
`$3`
`Generate an SEO-friendly HTML title in the format` Title | Site`. Optionally, include the` parent `argument to render` Title – Parent | Site`. Also, if` title `and` parent `are omitted, then it just uses the site.`
`> _NOTE: this is designed to be used in conjunction with a plugin like React Helmet_`
``JavaScript import { title } from '@legendarymediatv/bootstrap/functions';`
`…`
`{title("LegendaryMediaTV", "Bootstrap Demo")}`
`<br /> {title("LegendaryMediaTV", "Full Page Demo", "Bootstrap Demo")}<br />``
`| Name | Type | Default | Description | | :------------------ | :----- | :-------------------- | :--------------------------------------------------------------------------- | |`site`| string | required | site/company name | |`title`| string | | this page’s title | |`parent`| string | | parent page’s title | |`siteSeparator `| string | pipe: \| | separator between the` site `and the` title`/`parent`| |`parentSeparator `| string | en dash:` '–' `| separator between the` title `and` parent`| |`separatorReplacer `| string | forward slash:` '/' `| replacement character when` title `or` parent `contain the` parentSeparator `|`
`$3`
`Add the ability for any component to smoothly scroll to the top of the window.`
``JavaScript import { scrollToTopHandler } from '@legendarymediatv/bootstrap/ScrollToTop';`
`…`
`scroll to top``
`> _NOTE: see the` ` component above for a turnkey_ 🦃 _scroll-to-top solution_
Additional examples
For more examples of usage, see /src/pages

@legendarymediatv/bootstrap

LegendaryMediaTV Bootstrap

Recent changes

Getting started

$3

`$3`

`{props.title}`

`Components`

`$3`

$3

`$3`

$3

`$3`

$3

$3

`$3`

$3

`auto-flipper front content`

auto-flipper back content

`$3`

`$3`

Title or whatever

$3

`$3`

$3

`$3`

$3

`$3`

$3

`$3`

`$3`

`Functions`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

Additional examples