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 from babel.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 is rendered with this as its onClick | | subtitle | JSX | if error is an array, then 'Please fix the following error(s):'; if error is not an array, then 'The server has encountered a situation it doesn’t know how to handle'; otherwise, blank | content that goes inside a tag styled with a lead class | | title | JSX | if error is an array, then 'Submission Error'; if error is not an array, then 'Process Error'; otherwise, blank | content that goes inside an styled as a with an h3
class | | variant
| string | 'danger'
if error
is defined, otherwise 'primary'
(inherited) | Bootstrap theme color name |
$3 Set a background image so that it covers the whole screen without distorting and stays in place, regardless of scrolling.
`
JavaScript import BackgroundImage from '@legendarymediatv/bootstrap/BackgroundImage';…
`
| Name | Type | Default | Description | | :--------------- | :----- | :------- | :----------------------------------- | |
imageClassName
| string | | className
property for the | | imageStyle
| object | | style
property for the | | src
| string | required | path to the image file |
$3 Quote blocks of content using Bootstrap’s Blockquote .
`
JavaScript import Blockquote from '@legendarymediatv/bootstrap/Blockquote';…
A well-known quote, contained in a blockquote element.
Success, meaningful success, begins when we take ownership and actively take responsibility for our part in the shortcomings of our life.
Dr Eric Thomas,{" "} Greatness Is Upon You: Laying the Foundation `
$3 Quickly see what the current breakpoint is (e.g., “md”).
`
JavaScript import Breakpoint from '@legendarymediatv/bootstrap/Breakpoint';…
`
> _NOTE: This component is intended to be used for development purposes and probably should be removed before deploying your app_
| Name | Type | Default | Description | | :-------- | :----- | :------- | :------------------------- | |
variant
| string | 'info'
| Bootstrap theme color name |
$3 Allow someone to select a date using a calendar popover.
`
JavaScript import DatePicker from '@legendarymediatv/bootstrap/DatePicker'; … // use React state to track selected date const [componentState, setComponentState] = React.useState(null); … // select a new date function dateHandler(selected) => { setComponentState(selected); }; … title="Contact Date" value={componentState} onChange={dateHandler} />`
> _TIP: You could make your date change handler set the value for a hidden form element in addition to setting the state so that the date is submitted with the other form values_
| Name | Type | Default | Description | | :-------- | :---------- | :------------ | :------------------------------------------------------- | |
title
| JSX | Date Picker
| popover title | | titleAs
| elementType | | as property for the popover title | | variant | string | light | Bootstrap theme color name applied to the display button |
$3 This component is intended to be used for development purposes (e.g., testing your custom Bootstrap theme) by having everything all one one page!
$3 Bootstrap’s display heading typography classes.
-
- - - - -
`JavaScript import Display from '@legendarymediatv/bootstrap/Display';…
Display Heading 1
Display Heading 2
Display Heading 3
Display Heading 4
Display Heading 5
Display Heading 6
`| Name | Type | Default | Description | | :--- | :---------- | :------------------------------- | :------------------- | |
as | elementType | corresponding to the size | changes the HTML tag |
$3 Quickly create a stylized hero link or button that uses scaling and shadows to grow on hover and appear as depressed when clicked.
> _TIP: use in conjunction with grid layout components to have a wall effect_
> _TIP: since this component uses scaling, to prevent horizontal scrollbars on smaller displays, you may want to wrap your content in a
component or otherwise add overflow: hidden; styling to a fluid container, your tag, etc._
`JavaScript import Feature from '@legendarymediatv/bootstrap/Feature';…
title="Featured Content" subtitle="content to be featured" to="/sample" variant="info" textShadow wrapperClassName="rounded-pill mb-3" className="text-white py-5" />
title="Sample 1" to="/sample-1" variant="dark" className="py-3" /> |
title="Sample 2" to="/sample-2" variant="success" className="py-3" />
title="Sample 3" onClick={() => { alert("danger!"); }} variant="danger" className="py-3" /> `> _NOTE: This component is intended to be used for development purposes and probably should be removed before deploying your app_
| Name | Type | Default | Description | | :----------------- | :------ | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
href \| to | string | | URL or anchor target, making the feature item our Gatsby-friendly when set, otherwise it renders as a and probably should have the onClick set | | id | string | | applied to the wrapper | | subtitle
| JSX | | content that goes inside a tag styled with lead fst-italic
between the title
and children
| | title
| JSX | | content that goes inside an tag styled with display-4 mb-0 above the subtitle and/or children | | textShadow | boolean | false | add a slight shadow to the feature’s text | | variant | string | | Bootstrap theme color, if one is not provided, you should probably add background color and/or image using the provided id (images are set to center and cover) | | wrapperClassName | string | | className property for the wrapper | | wrapperStyle
| object | | style
property for the wrapper |
$3 Flashcard-like component that can flip horizontally or vertically using a 3D effect either on hover or via an event.
`
JavaScript import Flipper from '@legendarymediatv/bootstrap/Flipper';…
front={
auto-flipper front content } frontClassName="bg-primary text-light p-2" back={auto-flipper back content } backClassName="bg-secondary text-light p-2" />…
// use React state to track flipped state const [componentState, setComponentState] = React.useState(false); … function flipHandler(event) => { // un-click the button event.preventDefault();
// toggle flip state setComponentState(!componentState); }; … front={ onClick={flipHandler} className="w-100" > click to flip to the back } 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 />
`
| Name | Type | Default | Description | | :--------------- | :------ | :------ | :-------------------------------------------------------------------------------------------------------------------------------- | |
back
| JSX | | flipper back side content | | backClassName
| string | | className
property for the back side of the flipper | | backStyle
| object | | style
property for the back side of the flipper | | front
| JSX | | flipper front side content | | frontClassName
| string | | className
property for the front side of the flipper | | frontStyle
| object | | style
property for the front side of the flipper | | flipped
| boolean | null
| determines whether the card should display as flipped over (i.e., tie events to this property), if null
, then it flips on hover | | height
| string | 15rem
| height
property to apply to the style
for the flipper and both sides | | horizontal
| boolean | false
| flip the card horizontally instead of vertically |> _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" />`| Name | Type | Default | Description | | :--------------- | :-------------------------- | :--------------- | :----------------------------------------------- | |
ref | ReactRef | inherited | ref property for the | | as | elementType | inherited | as property for the | | controlId | string | inherited | controlId property for the | | info | JSX | | popover content for the | | infoAlt | string | inherited | alt property for the | | infoClassName | string | | className property for the | | infoStyle | object | | style property for the | | infoName | string | inherited | name property for the | | infoTitle | JSX | title property | title property for the | | infoTitleAs | elementType | inherited | titleAs property for the | | infoVariant | string | inherited | variant property for the | | iconClassName | string | | className property for the | | iconStyle | object | | style property for the | | title | JSX | | content for the | | labelRef | ReactRef | inherited | ref property for the | | labelAs | elementType | inherited | as property for the | | column | boolean \| 'sm' \| 'lg' | inherited | column property for the | | htmlFor | string | inherited | htmlFor property for the | | visuallyHidden | boolean | inherited | visuallyHidden property for the | | labelClassName | string | | className property for the | | labelStyle | object | | style property for the |
$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' }} />
`| Name | Type | Default | Description | | :-------- | :----- | :------------------------------------- | :-------------------------------------------------------------------------------------------------------------- | |
alt | string | variation of name (e.g., 'camera') | alternate text for the icon (i.e., ends up in aria-label) | | name | string | required | icon class name (e.g., 'fa-solid fa-camera') | | variant | string | | Bootstrap theme color name (e.g., 'primary') |
$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 !
`| Name | Type | Default | Description | | :-------------- | :---------- | :------------------------------------- | :------------------------------------------------------------------------------------------------------------------ | | children | JSX | | popover content | |
alt | string | variation of name (e.g., 'camera') | alternate text for the (i.e., ends up in aria-label) | | iconClassName | string | | className property for the (i.e., className is applied to the toggler button) | | iconStyle | object | | style property for the the (i.e., style is applied to the toggler button) | | name | string | 'fa-solid fa-circle-info' | icon class name | | title | JSX | | popover title | | titleAs | elementType | | 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 (native), depending on if a URL is provided in the href/to property - – with the content as an ARIA-friendly « by default - – with the content as an ARIA-friendly » by default - – with the content as an ARIA-friendly ‹ by default - – with the content as an ARIA-friendly › by default - – with the content as an ARIA-friendly … by default> _TIP: if you prefer to use icons, you can override the default content of any of the above by making the child an_
`JavaScript import Pagination from '@legendarymediatv/bootstrap/Pagination'; …
1 2 3 4 5
…
`####
properties| Name | Type | Default | Description | | :----- | :--------------- | :------ | :--------------------------------------- | |
size | 'sm' \| 'lg' | | sets the sizing for the whole pagination |####
properties| Name | Type | Default | Description | | :------------- | :------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
active | boolean | false | sets the pagination item as active and appends the children with a tag containing the activeLabel | | activeLabel | string | (current) | content of the tag when flagged as active | | disabled | boolean | false | sets the pagination item as disabled | | href \| to | URL | | URL or anchor target for the ; if blank, then a is rendered and probably should have an onClick defined | | onClick | function | | callback function for when the component is clicked; _TIP: as in the example above, use_ bind() _when assigning the property in order to tell which pagination item is clicked_ |
$3 Customizable icon that automatically appears in the bottom-right corner when you’re scrolled down the page a bit and smoothly scrolls to the top of the page when clicked.
`JavaScript import ScrollToTop from '@legendarymediatv/bootstrap/ScrollToTop';…
`> _NOTE: the
scrollToTop() handler function can be exported as well; see below for details_| Name | Type | Default | Description | | :-------------- | :----- | :-------------------------------- | :-------------------------------------------------------------------------------------------------------------- | |
alt | string | 'up arrow' | alternate text for the icon (i.e., ends up in aria-label) | | name | string | 'fa-solid fa-circle-chevron-up' | icon class name | | variant | string | 'dark' | Bootstrap theme color name | | iconClassName | string | | className property for the | | iconStyle | object | | style property for the |
$3 An extension of React Bootstrap’s
that automatically selects the border animation and adds the screen reader and ARIA role, so it can be self-closing and easily ensure the maximum accessibility .
`JavaScript import Spinner from '@legendarymediatv/bootstrap/Spinner';…
animation="grow" variant="success" />
title="Reticulating splines …" variant="primary" />
`| Name | Type | Default | Description | | :---------- | :--------------------- | :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | children | JSX |
'loading…' | content for child component | | animation | 'border' \| 'grow' | 'border' | changes the animation style of the spinner | | alert | boolean | false | wrap the spinner in an (centered with py-5 padding), defaulting variant to 'info', and apply non-spinner properties to the alert | | as | string | 'div' | custom HTML tag | | role | string | 'status' | ARIA accessibility role | | size | string | | component size variations (e.g., sm) | | title | JSX | | content for , also wraps the spinner in an (centered with py-4 padding), see alert above | | variant | string | 'primary' | Bootstrap theme color name (e.g., 'primary') |
$3 Bootstrap’s visually hidden content (a.k.a., screen reader only).
`JavaScript import VisuallyHidden from '@legendarymediatv/bootstrap/VisuallyHidden';…
Danger: This action is not reversible
`| Name | Type | Default | Description | | :-------- | :------ | :------ | :---------------- | | focusable | boolean |
false | item is focusable |
Functions
$3 Use
separate() to split a string (e.g., className) by whitespace into an array, always returning at least an empty array.Use
combine() to join an array with at least one element via a space separator, otherwise return null.> _NOTE: these are helpful when used together or in conjunction with
prepare() in order to join className before rendering the component; see the example there_
$3 A React component's properties cannot be altered, so use this function to create a new
properties array and children variable. Then, manipulate the array as you see fit, and spread out the new properties in your component.
`JavaScript import { combine, prepare } from "@legendarymediatv/bootstrap/functions";…
// prepare properties const [properties, children] = prepare(props);
// add variant to class properties.className.push(
text-${properties.variant}); delete properties.variant;// merge classes properties.className = combine(properties.className);
// render component return (
{children}
);`> _NOTE: this is helpful when used in conjunction with
prepare(props) in order to join className before rendering the component_
$3 Pass this function a form object (e.g., via an
onSubmit event handler’s event.target) and it will return a JSON object containing the form’s element data as key–value pairs. Key names are pulled from either the form element name (preferred) or id attribute, otherwise unnamed/unidentified elements are omitted. Unselected radio elements are ignored as well.> _NOTE: JSON data returned from this function could be utilized in API calls via extensions like Axios _
`JavaScript import { formData } from "@legendarymediatv/bootstrap/functions";...
const submitHander = (event) => { // don't traditionally submit the form event.preventDefault();
// extract data from the form const data = formData(event.target);
// display the form data object alert(JSON.stringify(data, null, 4)); }
...
`
$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")}
{title("LegendaryMediaTV", "Full Page Demo", "Bootstrap Demo")}
`| 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
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