"})," component to provide matching\ncolored links within any alert."]}),"\n",(0,i.jsx)(t,{language:"jsx",live:!0,children:c}),"\n",(0,i.jsx)(n.h3,{id:"additional-content",children:"Additional content"}),"\n",(0,i.jsx)(n.p,{children:"Alerts can contain whatever content you like. Headers, paragraphs, dividers, go crazy."}),"\n",(0,i.jsx)(t,{language:"jsx",live:!0,children:o}),"\n",(0,i.jsx)(n.h3,{id:"dismissing",children:"Dismissing"}),"\n",(0,i.jsxs)(n.p,{children:["Add the ",(0,i.jsx)(n.code,{children:"dismissible"})," prop to add a functioning dismiss\nbutton to the Alert."]}),"\n",(0,i.jsx)(t,{language:"jsx",live:!0,children:r}),"\n",(0,i.jsx)(n.p,{children:"You can also control the visual state directly which is great if you\nwant to build more complicated alerts."}),"\n",(0,i.jsx)(t,{language:"jsx",live:!0,children:l.Z}),"\n",(0,i.jsx)(n.h2,{id:"api",children:"API"}),"\n",(0,i.jsx)(n.h3,{id:"alert",children:"Alert"}),"\n",(0,i.jsx)(d,{name:"Alert"}),"\n",(0,i.jsx)(n.h3,{id:"alertheading",children:"AlertHeading"}),"\n",(0,i.jsx)(d,{name:"AlertHeading"}),"\n",(0,i.jsx)(n.h3,{id:"alertlink",children:"AlertLink"}),"\n",(0,i.jsx)(d,{name:"AlertLink"})]})}function g(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}function x(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},35578:(e,n,t)=>{t.d(n,{Z:()=>i});const i="import { useState } from 'react';\nimport Alert from 'react-bootstrap/Alert';\nimport Button from 'react-bootstrap/Button';\n\nfunction AlertDismissible() {\n const [show, setShow] = useState(true);\n\n return (\n <>\n \n My Alert\n \n Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget\n lacinia odio sem nec elit. Cras mattis consectetur purus sit amet\n fermentum.\n
\n
\n \n \n
\n \n\n {!show && }\n >\n );\n}\n\nexport default AlertDismissible;\n"},11151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>a});var i=t(67294);const s={},o=i.createContext(s);function a(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/32027d24.6a79909b.js b/assets/js/32027d24.daeb2c8f.js
similarity index 98%
rename from assets/js/32027d24.6a79909b.js
rename to assets/js/32027d24.daeb2c8f.js
index b5d2795..3d70ea9 100644
--- a/assets/js/32027d24.6a79909b.js
+++ b/assets/js/32027d24.daeb2c8f.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[9814],{24054:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>c,default:()=>m,frontMatter:()=>a,metadata:()=>d,toc:()=>p});var o=n(85893),s=n(11151);const i="import ThemeProvider from 'react-bootstrap/ThemeProvider';\nimport Button from 'react-bootstrap/Button';\n\nfunction PrefixesExample() {\n return (\n <>\n {/* Hint: inspect the markup to see how the classes differ */}\n \n \n \n \n >\n );\n}\n\nexport default PrefixesExample;\n",r='import Button from \'react-bootstrap/Button\';\n\nfunction VariantsExample() {\n return (\n <>\n \n\n \n >\n );\n}\n\nexport default VariantsExample;\n',a={title:"Theming and customizing styles",sidebar_label:"Theming",sidebar_position:3},c=void 0,d={id:"getting-started/theming",title:"Theming and customizing styles",description:"Generally, if you stick to the Bootstrap defined classes and variants,",source:"@site/docs/getting-started/theming.mdx",sourceDirName:"getting-started",slug:"/getting-started/theming",permalink:"/docs/getting-started/theming",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Theming and customizing styles",sidebar_label:"Theming",sidebar_position:3},sidebar:"sidebar",previous:{title:"Why React-Bootstrap?",permalink:"/docs/getting-started/why-react-bootstrap"},next:{title:"Color modes",permalink:"/docs/getting-started/color-modes"}},l={},p=[{value:"New variants and sizes",id:"new-variants-and-sizes",level:2},{value:"Prefixing components",id:"prefixing-components",level:2}];function u(e){const t={admonition:"admonition",code:"code",h2:"h2",p:"p",...(0,s.a)(),...e.components},{CodeBlock:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodeBlock",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Generally, if you stick to the Bootstrap defined classes and variants,\nthere isn't anything you need to do to use a custom theme with\nReact-Bootstrap. It just works. But we also make coloring outside the\nlines easy to do."}),"\n",(0,o.jsx)(t.h2,{id:"new-variants-and-sizes",children:"New variants and sizes"}),"\n",(0,o.jsxs)(t.p,{children:["Custom variants and sizes should follow the pattern of the default\nBootstrap variants, and define css classes matching:\n",(0,o.jsx)(t.code,{children:"component-*"}),". React-Bootstrap builds the component\n",(0,o.jsx)(t.code,{children:"classNames"})," in a consistent way that you can rely on. For\ninstance this custom ",(0,o.jsx)(t.code,{children:"Button"}),"."]}),"\n",(0,o.jsx)(n,{language:"jsx",live:!0,children:r}),"\n",(0,o.jsx)(t.h2,{id:"prefixing-components",children:"Prefixing components"}),"\n",(0,o.jsxs)(t.p,{children:['In some cases you may need to change the base class "prefix" of one or\nmore components. You can control how a component prefixes its classes\nlocally by changing the ',(0,o.jsx)(t.code,{children:"bsPrefix"})," prop or globally via the\n",(0,o.jsx)(t.code,{children:"ThemeProvider"})," component."]}),"\n",(0,o.jsx)(t.admonition,{type:"caution",children:(0,o.jsx)(t.p,{children:"Changing prefixes is an escape hatch and generally shouldn't be used."})}),"\n",(0,o.jsx)(n,{language:"jsx",live:!0,children:i})]})}function m(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},11151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>r});var o=n(67294);const s={},i=o.createContext(s);function r(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[9814],{23115:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>c,default:()=>m,frontMatter:()=>a,metadata:()=>d,toc:()=>p});var o=n(85893),s=n(11151);const i="import ThemeProvider from 'react-bootstrap/ThemeProvider';\nimport Button from 'react-bootstrap/Button';\n\nfunction PrefixesExample() {\n return (\n <>\n {/* Hint: inspect the markup to see how the classes differ */}\n \n \n \n \n >\n );\n}\n\nexport default PrefixesExample;\n",r='import Button from \'react-bootstrap/Button\';\n\nfunction VariantsExample() {\n return (\n <>\n \n\n \n >\n );\n}\n\nexport default VariantsExample;\n',a={title:"Theming and customizing styles",sidebar_label:"Theming",sidebar_position:3},c=void 0,d={id:"getting-started/theming",title:"Theming and customizing styles",description:"Generally, if you stick to the Bootstrap defined classes and variants,",source:"@site/docs/getting-started/theming.mdx",sourceDirName:"getting-started",slug:"/getting-started/theming",permalink:"/docs/getting-started/theming",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Theming and customizing styles",sidebar_label:"Theming",sidebar_position:3},sidebar:"sidebar",previous:{title:"Why React-Bootstrap?",permalink:"/docs/getting-started/why-react-bootstrap"},next:{title:"Color modes",permalink:"/docs/getting-started/color-modes"}},l={},p=[{value:"New variants and sizes",id:"new-variants-and-sizes",level:2},{value:"Prefixing components",id:"prefixing-components",level:2}];function u(e){const t={admonition:"admonition",code:"code",h2:"h2",p:"p",...(0,s.a)(),...e.components},{CodeBlock:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodeBlock",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"Generally, if you stick to the Bootstrap defined classes and variants,\nthere isn't anything you need to do to use a custom theme with\nReact-Bootstrap. It just works. But we also make coloring outside the\nlines easy to do."}),"\n",(0,o.jsx)(t.h2,{id:"new-variants-and-sizes",children:"New variants and sizes"}),"\n",(0,o.jsxs)(t.p,{children:["Custom variants and sizes should follow the pattern of the default\nBootstrap variants, and define css classes matching:\n",(0,o.jsx)(t.code,{children:"component-*"}),". React-Bootstrap builds the component\n",(0,o.jsx)(t.code,{children:"classNames"})," in a consistent way that you can rely on. For\ninstance this custom ",(0,o.jsx)(t.code,{children:"Button"}),"."]}),"\n",(0,o.jsx)(n,{language:"jsx",live:!0,children:r}),"\n",(0,o.jsx)(t.h2,{id:"prefixing-components",children:"Prefixing components"}),"\n",(0,o.jsxs)(t.p,{children:['In some cases you may need to change the base class "prefix" of one or\nmore components. You can control how a component prefixes its classes\nlocally by changing the ',(0,o.jsx)(t.code,{children:"bsPrefix"})," prop or globally via the\n",(0,o.jsx)(t.code,{children:"ThemeProvider"})," component."]}),"\n",(0,o.jsx)(t.admonition,{type:"caution",children:(0,o.jsx)(t.p,{children:"Changing prefixes is an escape hatch and generally shouldn't be used."})}),"\n",(0,o.jsx)(n,{language:"jsx",live:!0,children:i})]})}function m(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},11151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>r});var o=n(67294);const s={},i=o.createContext(s);function r(e){const t=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),o.createElement(i.Provider,{value:t},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/3207f380.5b32f33f.js b/assets/js/3207f380.3e4959b3.js
similarity index 98%
rename from assets/js/3207f380.5b32f33f.js
rename to assets/js/3207f380.3e4959b3.js
index daa8e43..3a375d0 100644
--- a/assets/js/3207f380.5b32f33f.js
+++ b/assets/js/3207f380.3e4959b3.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[6997],{21828:(e,n,a)=>{a.r(n),a.d(n,{assets:()=>p,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>g,toc:()=>m});var t=a(85893),o=a(11151);const d='import Badge from \'react-bootstrap/Badge\';\n\nfunction BasicExample() {\n return (\n \n
\n Example heading New\n
\n \n Example heading New\n
\n \n Example heading New\n
\n \n Example heading New\n
\n \n Example heading New\n
\n \n Example heading New\n
\n \n );\n}\n\nexport default BasicExample;\n',r='import Badge from \'react-bootstrap/Badge\';\nimport Button from \'react-bootstrap/Button\';\n\nfunction ButtonExample() {\n return (\n \n );\n}\n\nexport default ButtonExample;\n',i='import Badge from \'react-bootstrap/Badge\';\nimport Stack from \'react-bootstrap/Stack\';\n\nfunction PillExample() {\n return (\n \n \n Primary\n \n \n Secondary\n \n \n Success\n \n \n Danger\n \n \n Warning\n \n \n Info\n \n \n Light\n \n \n Dark\n \n \n );\n}\n\nexport default PillExample;\n',s='import Badge from \'react-bootstrap/Badge\';\nimport Stack from \'react-bootstrap/Stack\';\n\nfunction VariationsExample() {\n return (\n \n Primary\n Secondary\n Success\n Danger\n \n Warning\n \n Info\n \n Light\n \n Dark\n \n );\n}\n\nexport default VariationsExample;\n',l={title:"Badges",description:"Documentation and examples for badges, our small count and labeling component."},c=void 0,g={id:"components/badge",title:"Badges",description:"Documentation and examples for badges, our small count and labeling component.",source:"@site/docs/components/badge.mdx",sourceDirName:"components",slug:"/components/badge",permalink:"/docs/components/badge",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"Badges",description:"Documentation and examples for badges, our small count and labeling component."},sidebar:"sidebar",previous:{title:"Alerts",permalink:"/docs/components/alerts"},next:{title:"Breadcrumbs",permalink:"/docs/components/breadcrumb"}},p={},m=[{value:"Examples",id:"examples",level:2},{value:"Contextual variations",id:"contextual-variations",level:2},{value:"Pill badges",id:"pill-badges",level:2},{value:"API",id:"api",level:2},{value:"Badge",id:"badge",level:3}];function u(e){const n={code:"code",h2:"h2",h3:"h3",p:"p",...(0,o.a)(),...e.components},{CodeBlock:a,PropsTable:l}=n;return a||b("CodeBlock",!0),l||b("PropsTable",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,t.jsx)(n.p,{children:"Badges scale to match the size of the immediate parent element by\nusing relative font sizing and em units."}),"\n",(0,t.jsx)(a,{language:"jsx",live:!0,children:d}),"\n",(0,t.jsx)(n.p,{children:"Badges can be used as part of links or buttons to provide a counter."}),"\n",(0,t.jsx)(a,{language:"jsx",live:!0,children:r}),"\n",(0,t.jsx)(n.p,{children:"Note that depending on how they are used, badges may be confusing for\nusers of screen readers and similar assistive technologies. While the\nstyling of badges provides a visual cue as to their purpose, these users\nwill simply be presented with the content of the badge. Depending on the\nspecific situation, these badges may seem like random additional words or\nnumbers at the end of a sentence, link, or button. Unless the context is\nclear, consider including additional context with a visually hidden piece\nof additional text."}),"\n",(0,t.jsx)(n.h2,{id:"contextual-variations",children:"Contextual variations"}),"\n",(0,t.jsx)(n.p,{children:"Add any of the below mentioned modifier classes to change the\nappearance of a badge."}),"\n",(0,t.jsx)(a,{language:"jsx",live:!0,children:s}),"\n",(0,t.jsx)(n.h2,{id:"pill-badges",children:"Pill badges"}),"\n",(0,t.jsxs)(n.p,{children:["Use the ",(0,t.jsx)(n.code,{children:"pill"})," modifier class to make badges more rounded (with a larger\n",(0,t.jsx)(n.code,{children:"border-radius"}),"). Useful if you miss the badges from v3."]}),"\n",(0,t.jsx)(a,{language:"jsx",live:!0,children:i}),"\n",(0,t.jsx)(n.h2,{id:"api",children:"API"}),"\n",(0,t.jsx)(n.h3,{id:"badge",children:"Badge"}),"\n",(0,t.jsx)(l,{name:"Badge"})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(u,{...e})}):u(e)}function b(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},11151:(e,n,a)=>{a.d(n,{Z:()=>i,a:()=>r});var t=a(67294);const o={},d=t.createContext(o);function r(e){const n=t.useContext(d);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),t.createElement(d.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[6997],{26135:(e,n,a)=>{a.r(n),a.d(n,{assets:()=>p,contentTitle:()=>c,default:()=>h,frontMatter:()=>l,metadata:()=>g,toc:()=>m});var t=a(85893),o=a(11151);const d='import Badge from \'react-bootstrap/Badge\';\n\nfunction BasicExample() {\n return (\n \n
\n Example heading New\n
\n \n Example heading New\n
\n \n Example heading New\n
\n \n Example heading New\n
\n \n Example heading New\n
\n \n Example heading New\n
\n \n );\n}\n\nexport default BasicExample;\n',r='import Badge from \'react-bootstrap/Badge\';\nimport Button from \'react-bootstrap/Button\';\n\nfunction ButtonExample() {\n return (\n \n );\n}\n\nexport default ButtonExample;\n',i='import Badge from \'react-bootstrap/Badge\';\nimport Stack from \'react-bootstrap/Stack\';\n\nfunction PillExample() {\n return (\n \n \n Primary\n \n \n Secondary\n \n \n Success\n \n \n Danger\n \n \n Warning\n \n \n Info\n \n \n Light\n \n \n Dark\n \n \n );\n}\n\nexport default PillExample;\n',s='import Badge from \'react-bootstrap/Badge\';\nimport Stack from \'react-bootstrap/Stack\';\n\nfunction VariationsExample() {\n return (\n \n Primary\n Secondary\n Success\n Danger\n \n Warning\n \n Info\n \n Light\n \n Dark\n \n );\n}\n\nexport default VariationsExample;\n',l={title:"Badges",description:"Documentation and examples for badges, our small count and labeling component."},c=void 0,g={id:"components/badge",title:"Badges",description:"Documentation and examples for badges, our small count and labeling component.",source:"@site/docs/components/badge.mdx",sourceDirName:"components",slug:"/components/badge",permalink:"/docs/components/badge",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"Badges",description:"Documentation and examples for badges, our small count and labeling component."},sidebar:"sidebar",previous:{title:"Alerts",permalink:"/docs/components/alerts"},next:{title:"Breadcrumbs",permalink:"/docs/components/breadcrumb"}},p={},m=[{value:"Examples",id:"examples",level:2},{value:"Contextual variations",id:"contextual-variations",level:2},{value:"Pill badges",id:"pill-badges",level:2},{value:"API",id:"api",level:2},{value:"Badge",id:"badge",level:3}];function u(e){const n={code:"code",h2:"h2",h3:"h3",p:"p",...(0,o.a)(),...e.components},{CodeBlock:a,PropsTable:l}=n;return a||b("CodeBlock",!0),l||b("PropsTable",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"examples",children:"Examples"}),"\n",(0,t.jsx)(n.p,{children:"Badges scale to match the size of the immediate parent element by\nusing relative font sizing and em units."}),"\n",(0,t.jsx)(a,{language:"jsx",live:!0,children:d}),"\n",(0,t.jsx)(n.p,{children:"Badges can be used as part of links or buttons to provide a counter."}),"\n",(0,t.jsx)(a,{language:"jsx",live:!0,children:r}),"\n",(0,t.jsx)(n.p,{children:"Note that depending on how they are used, badges may be confusing for\nusers of screen readers and similar assistive technologies. While the\nstyling of badges provides a visual cue as to their purpose, these users\nwill simply be presented with the content of the badge. Depending on the\nspecific situation, these badges may seem like random additional words or\nnumbers at the end of a sentence, link, or button. Unless the context is\nclear, consider including additional context with a visually hidden piece\nof additional text."}),"\n",(0,t.jsx)(n.h2,{id:"contextual-variations",children:"Contextual variations"}),"\n",(0,t.jsx)(n.p,{children:"Add any of the below mentioned modifier classes to change the\nappearance of a badge."}),"\n",(0,t.jsx)(a,{language:"jsx",live:!0,children:s}),"\n",(0,t.jsx)(n.h2,{id:"pill-badges",children:"Pill badges"}),"\n",(0,t.jsxs)(n.p,{children:["Use the ",(0,t.jsx)(n.code,{children:"pill"})," modifier class to make badges more rounded (with a larger\n",(0,t.jsx)(n.code,{children:"border-radius"}),"). Useful if you miss the badges from v3."]}),"\n",(0,t.jsx)(a,{language:"jsx",live:!0,children:i}),"\n",(0,t.jsx)(n.h2,{id:"api",children:"API"}),"\n",(0,t.jsx)(n.h3,{id:"badge",children:"Badge"}),"\n",(0,t.jsx)(l,{name:"Badge"})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(u,{...e})}):u(e)}function b(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},11151:(e,n,a)=>{a.d(n,{Z:()=>i,a:()=>r});var t=a(67294);const o={},d=t.createContext(o);function r(e){const n=t.useContext(d);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),t.createElement(d.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/36041992.538b3915.js b/assets/js/36041992.538b3915.js
deleted file mode 100644
index 7936259..0000000
--- a/assets/js/36041992.538b3915.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[1073],{3798:(t,e,o)=>{o.r(e),o.d(e,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>a,metadata:()=>s,toc:()=>l});var r=o(85893),n=o(11151);const a={title:"About",description:"Get to know more about the team maintaining React Bootstrap. Learn a little history of how, why and when the project started and how you can be a part of it.",sidebar_position:8},i=void 0,s={id:"about",title:"About",description:"Get to know more about the team maintaining React Bootstrap. Learn a little history of how, why and when the project started and how you can be a part of it.",source:"@site/docs/about.mdx",sourceDirName:".",slug:"/about",permalink:"/docs/about",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:8,frontMatter:{title:"About",description:"Get to know more about the team maintaining React Bootstrap. Learn a little history of how, why and when the project started and how you can be a part of it.",sidebar_position:8},sidebar:"sidebar",previous:{title:"Migrating",permalink:"/docs/migrating"}},c={},l=[{value:"Team",id:"team",level:2},{value:"Contributors",id:"contributors",level:2},{value:"Get Involved",id:"get-involved",level:2},{value:"External Links",id:"external-links",level:2}];function h(t){const e={a:"a",h2:"h2",li:"li",p:"p",ul:"ul",...(0,n.a)(),...t.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{id:"team",children:"Team"}),"\n",(0,r.jsxs)(e.p,{children:["React Bootstrap is maintained by a ",(0,r.jsx)(e.a,{href:"https://github.com/orgs/react-bootstrap/people",children:"team of developers"})," on Github. We have a growing team\nand if you are interested in re-building the most popular front-end framework with React we would love to hear from you."]}),"\n",(0,r.jsx)(e.h2,{id:"contributors",children:"Contributors"}),"\n",(0,r.jsxs)(e.p,{children:["We welcome community support with both feature and bug reporting. Please don't hesitate to jump in.\nJoin our growing list of ",(0,r.jsx)(e.a,{href:"https://github.com/react-bootstrap/react-bootstrap/graphs/contributors",children:"contributors"}),"."]}),"\n",(0,r.jsx)(e.h2,{id:"get-involved",children:"Get Involved"}),"\n",(0,r.jsxs)(e.p,{children:["Get involved with React Bootstrap ",(0,r.jsx)(e.a,{href:"https://github.com/react-bootstrap/react-bootstrap/issues/new",children:"by opening an issue"})," or submitting a pull request.\nSee our ",(0,r.jsx)(e.a,{href:"https://github.com/react-bootstrap/react-bootstrap/blob/master/CONTRIBUTING.md",children:"contributing guidelines"})," here."]}),"\n",(0,r.jsx)(e.h2,{id:"external-links",children:"External Links"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://getbootstrap.com/",children:"Bootstrap"})}),"\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://reactjs.org/",children:"React"})}),"\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://github.com/react-bootstrap/react-router-bootstrap",children:"React Router Bootstrap"})}),"\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://github.com/Hermanya/awesome-react-bootstrap-components",children:"Awesome React Bootstrap Components"})}),"\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic",children:"React Bootstrap CodeSandbox examples"})}),"\n"]})]})}function d(t={}){const{wrapper:e}={...(0,n.a)(),...t.components};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(h,{...t})}):h(t)}},11151:(t,e,o)=>{o.d(e,{Z:()=>s,a:()=>i});var r=o(67294);const n={},a=r.createContext(n);function i(t){const e=r.useContext(a);return r.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function s(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(n):t.components||n:i(t.components),r.createElement(a.Provider,{value:e},t.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/36041992.b476f68a.js b/assets/js/36041992.b476f68a.js
new file mode 100644
index 0000000..3a8e15e
--- /dev/null
+++ b/assets/js/36041992.b476f68a.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[1073],{96073:(t,e,o)=>{o.r(e),o.d(e,{assets:()=>c,contentTitle:()=>i,default:()=>d,frontMatter:()=>a,metadata:()=>s,toc:()=>l});var r=o(85893),n=o(11151);const a={title:"About",description:"Get to know more about the team maintaining React Bootstrap. Learn a little history of how, why and when the project started and how you can be a part of it.",sidebar_position:8},i=void 0,s={id:"about",title:"About",description:"Get to know more about the team maintaining React Bootstrap. Learn a little history of how, why and when the project started and how you can be a part of it.",source:"@site/docs/about.mdx",sourceDirName:".",slug:"/about",permalink:"/docs/about",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:8,frontMatter:{title:"About",description:"Get to know more about the team maintaining React Bootstrap. Learn a little history of how, why and when the project started and how you can be a part of it.",sidebar_position:8},sidebar:"sidebar",previous:{title:"Migrating",permalink:"/docs/migrating"}},c={},l=[{value:"Team",id:"team",level:2},{value:"Contributors",id:"contributors",level:2},{value:"Get Involved",id:"get-involved",level:2},{value:"External Links",id:"external-links",level:2}];function h(t){const e={a:"a",h2:"h2",li:"li",p:"p",ul:"ul",...(0,n.a)(),...t.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{id:"team",children:"Team"}),"\n",(0,r.jsxs)(e.p,{children:["React Bootstrap is maintained by a ",(0,r.jsx)(e.a,{href:"https://github.com/orgs/react-bootstrap/people",children:"team of developers"})," on Github. We have a growing team\nand if you are interested in re-building the most popular front-end framework with React we would love to hear from you."]}),"\n",(0,r.jsx)(e.h2,{id:"contributors",children:"Contributors"}),"\n",(0,r.jsxs)(e.p,{children:["We welcome community support with both feature and bug reporting. Please don't hesitate to jump in.\nJoin our growing list of ",(0,r.jsx)(e.a,{href:"https://github.com/react-bootstrap/react-bootstrap/graphs/contributors",children:"contributors"}),"."]}),"\n",(0,r.jsx)(e.h2,{id:"get-involved",children:"Get Involved"}),"\n",(0,r.jsxs)(e.p,{children:["Get involved with React Bootstrap ",(0,r.jsx)(e.a,{href:"https://github.com/react-bootstrap/react-bootstrap/issues/new",children:"by opening an issue"})," or submitting a pull request.\nSee our ",(0,r.jsx)(e.a,{href:"https://github.com/react-bootstrap/react-bootstrap/blob/master/CONTRIBUTING.md",children:"contributing guidelines"})," here."]}),"\n",(0,r.jsx)(e.h2,{id:"external-links",children:"External Links"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://getbootstrap.com/",children:"Bootstrap"})}),"\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://reactjs.org/",children:"React"})}),"\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://github.com/react-bootstrap/react-router-bootstrap",children:"React Router Bootstrap"})}),"\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://github.com/Hermanya/awesome-react-bootstrap-components",children:"Awesome React Bootstrap Components"})}),"\n",(0,r.jsx)(e.li,{children:(0,r.jsx)(e.a,{href:"https://codesandbox.io/s/github/react-bootstrap/code-sandbox-examples/tree/master/basic",children:"React Bootstrap CodeSandbox examples"})}),"\n"]})]})}function d(t={}){const{wrapper:e}={...(0,n.a)(),...t.components};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(h,{...t})}):h(t)}},11151:(t,e,o)=>{o.d(e,{Z:()=>s,a:()=>i});var r=o(67294);const n={},a=r.createContext(n);function i(t){const e=r.useContext(a);return r.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function s(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(n):t.components||n:i(t.components),r.createElement(a.Provider,{value:e},t.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/3e620176.39045b2f.js b/assets/js/3e620176.a3224e42.js
similarity index 99%
rename from assets/js/3e620176.39045b2f.js
rename to assets/js/3e620176.a3224e42.js
index 52b7067..ad20f5a 100644
--- a/assets/js/3e620176.39045b2f.js
+++ b/assets/js/3e620176.a3224e42.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[638],{64921:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>l,toc:()=>d});var o=n(85893),s=n(11151),a=n(35578);const r={title:"Why React-Bootstrap?",sidebar_position:2},i=void 0,l={id:"getting-started/why-react-bootstrap",title:"Why React-Bootstrap?",description:"React-Bootstrap is a complete re-implementation of the",source:"@site/docs/getting-started/why-react-bootstrap.mdx",sourceDirName:"getting-started",slug:"/getting-started/why-react-bootstrap",permalink:"/docs/getting-started/why-react-bootstrap",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Why React-Bootstrap?",sidebar_position:2},sidebar:"sidebar",previous:{title:"Introduction",permalink:"/docs/getting-started/introduction"},next:{title:"Theming",permalink:"/docs/getting-started/theming"}},c={},d=[{value:"A Simple React Component",id:"a-simple-react-component",level:2},{value:"Bootstrap",id:"bootstrap",level:3},{value:"React-Bootstrap",id:"react-bootstrap",level:3},{value:"Bootstrap with state",id:"bootstrap-with-state",level:2},{value:"React-bootstrap",id:"react-bootstrap-1",level:3},{value:"Bootstrap",id:"bootstrap-1",level:3}];function p(t){const e={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...t.components},{CodeBlock:n}=e;return n||function(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodeBlock",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:["React-Bootstrap is a complete re-implementation of the\nBootstrap components using React. It has\xa0",(0,o.jsxs)(e.strong,{children:["no dependency\non either\xa0",(0,o.jsx)(e.code,{children:"bootstrap.js"}),"\xa0or jQuery."]})," If you have React\nsetup and React-Bootstrap installed, you have everything\nyou need."]}),"\n",(0,o.jsx)(e.p,{children:"Methods and events using jQuery is done imperatively\nby directly manipulating the DOM. In contrast, React\nuses updates to the state to update the virtual DOM.\nIn this way, React-Bootstrap provides a more reliable\nsolution by incorporating Bootstrap functionality into\nReact's virtual DOM. Below are a few examples of how\nReact-Bootstrap components differ from Bootstrap."}),"\n",(0,o.jsx)(e.h2,{id:"a-simple-react-component",children:"A Simple React Component"}),"\n",(0,o.jsx)(e.p,{children:"The CSS and details of Bootstrap components are rather\nopinionated and lengthy. React-Bootstrap simplifies\nthis by condensing the original Bootstrap into React-styled\ncomponents."}),"\n",(0,o.jsx)(e.h3,{id:"bootstrap",children:"Bootstrap"}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:'import * as React from \'react\';\n\nfunction Example() {\n return (\n \n
Oh snap! You got an error!\n
Change this and that and try again.
\n
\n
\n );\n}\n'})}),"\n",(0,o.jsx)(e.h3,{id:"react-bootstrap",children:"React-Bootstrap"}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:"import * as React from 'react';\nimport Alert from 'react-bootstrap/Alert';\n\nfunction Example() {\n return (\n \n Oh snap! You got an error!\n Change this and that and try again.
\n \n );\n}\n"})}),"\n",(0,o.jsx)(e.h2,{id:"bootstrap-with-state",children:"Bootstrap with state"}),"\n",(0,o.jsx)(e.p,{children:"Since React-Bootstrap is built with React Javascript, state\ncan be passed within React-Bootstrap components as a prop.\nIt also makes it easier to manage the state as updates are\nmade using React\u2019s state instead of directly manipulating\nthe state of the DOM. This also gives a lot of flexibility\nwhen creating more complex components."}),"\n",(0,o.jsx)(e.h3,{id:"react-bootstrap-1",children:"React-bootstrap"}),"\n",(0,o.jsx)(n,{language:"jsx",live:!0,children:a.Z}),"\n",(0,o.jsx)(e.h3,{id:"bootstrap-1",children:"Bootstrap"}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-html",children:'\n
How\'s it going?!\n
\n Duis mollis, est non commodo luctus, nisi erat porttitor ligula,\n eget lacinia odio sem nec elit. Cras mattis consectetur purus sit\n amet fermentum.\n
\n
\n
\n\t\n
\n
\n\n\t\n
\n'})}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-js",children:"$('.btn-outline-success').on('click', function(e) {\n $('.firstCollapsible').addClass('d-none');\n $('.secondCollapsible').removeClass('d-none');\n})\n\n$('.btn-primary').on('click', function(e) {\n $('.firstCollapsible').removeClass('d-none');\n $('.secondCollapsible').addClass('d-none');\n})\n"})})]})}function u(t={}){const{wrapper:e}={...(0,s.a)(),...t.components};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(p,{...t})}):p(t)}},35578:(t,e,n)=>{n.d(e,{Z:()=>o});const o="import { useState } from 'react';\nimport Alert from 'react-bootstrap/Alert';\nimport Button from 'react-bootstrap/Button';\n\nfunction AlertDismissible() {\n const [show, setShow] = useState(true);\n\n return (\n <>\n \n My Alert\n \n Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget\n lacinia odio sem nec elit. Cras mattis consectetur purus sit amet\n fermentum.\n
\n
\n \n \n
\n \n\n {!show && }\n >\n );\n}\n\nexport default AlertDismissible;\n"},11151:(t,e,n)=>{n.d(e,{Z:()=>i,a:()=>r});var o=n(67294);const s={},a=o.createContext(s);function r(t){const e=o.useContext(a);return o.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function i(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(s):t.components||s:r(t.components),o.createElement(a.Provider,{value:e},t.children)}}}]);
\ No newline at end of file
+"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[638],{38925:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>r,metadata:()=>l,toc:()=>d});var o=n(85893),s=n(11151),a=n(35578);const r={title:"Why React-Bootstrap?",sidebar_position:2},i=void 0,l={id:"getting-started/why-react-bootstrap",title:"Why React-Bootstrap?",description:"React-Bootstrap is a complete re-implementation of the",source:"@site/docs/getting-started/why-react-bootstrap.mdx",sourceDirName:"getting-started",slug:"/getting-started/why-react-bootstrap",permalink:"/docs/getting-started/why-react-bootstrap",draft:!1,unlisted:!1,tags:[],version:"current",sidebarPosition:2,frontMatter:{title:"Why React-Bootstrap?",sidebar_position:2},sidebar:"sidebar",previous:{title:"Introduction",permalink:"/docs/getting-started/introduction"},next:{title:"Theming",permalink:"/docs/getting-started/theming"}},c={},d=[{value:"A Simple React Component",id:"a-simple-react-component",level:2},{value:"Bootstrap",id:"bootstrap",level:3},{value:"React-Bootstrap",id:"react-bootstrap",level:3},{value:"Bootstrap with state",id:"bootstrap-with-state",level:2},{value:"React-bootstrap",id:"react-bootstrap-1",level:3},{value:"Bootstrap",id:"bootstrap-1",level:3}];function p(t){const e={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...(0,s.a)(),...t.components},{CodeBlock:n}=e;return n||function(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}("CodeBlock",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(e.p,{children:["React-Bootstrap is a complete re-implementation of the\nBootstrap components using React. It has\xa0",(0,o.jsxs)(e.strong,{children:["no dependency\non either\xa0",(0,o.jsx)(e.code,{children:"bootstrap.js"}),"\xa0or jQuery."]})," If you have React\nsetup and React-Bootstrap installed, you have everything\nyou need."]}),"\n",(0,o.jsx)(e.p,{children:"Methods and events using jQuery is done imperatively\nby directly manipulating the DOM. In contrast, React\nuses updates to the state to update the virtual DOM.\nIn this way, React-Bootstrap provides a more reliable\nsolution by incorporating Bootstrap functionality into\nReact's virtual DOM. Below are a few examples of how\nReact-Bootstrap components differ from Bootstrap."}),"\n",(0,o.jsx)(e.h2,{id:"a-simple-react-component",children:"A Simple React Component"}),"\n",(0,o.jsx)(e.p,{children:"The CSS and details of Bootstrap components are rather\nopinionated and lengthy. React-Bootstrap simplifies\nthis by condensing the original Bootstrap into React-styled\ncomponents."}),"\n",(0,o.jsx)(e.h3,{id:"bootstrap",children:"Bootstrap"}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:'import * as React from \'react\';\n\nfunction Example() {\n return (\n \n
Oh snap! You got an error!\n
Change this and that and try again.
\n
\n
\n );\n}\n'})}),"\n",(0,o.jsx)(e.h3,{id:"react-bootstrap",children:"React-Bootstrap"}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-jsx",children:"import * as React from 'react';\nimport Alert from 'react-bootstrap/Alert';\n\nfunction Example() {\n return (\n \n Oh snap! You got an error!\n Change this and that and try again.
\n \n );\n}\n"})}),"\n",(0,o.jsx)(e.h2,{id:"bootstrap-with-state",children:"Bootstrap with state"}),"\n",(0,o.jsx)(e.p,{children:"Since React-Bootstrap is built with React Javascript, state\ncan be passed within React-Bootstrap components as a prop.\nIt also makes it easier to manage the state as updates are\nmade using React\u2019s state instead of directly manipulating\nthe state of the DOM. This also gives a lot of flexibility\nwhen creating more complex components."}),"\n",(0,o.jsx)(e.h3,{id:"react-bootstrap-1",children:"React-bootstrap"}),"\n",(0,o.jsx)(n,{language:"jsx",live:!0,children:a.Z}),"\n",(0,o.jsx)(e.h3,{id:"bootstrap-1",children:"Bootstrap"}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-html",children:'\n
How\'s it going?!\n
\n Duis mollis, est non commodo luctus, nisi erat porttitor ligula,\n eget lacinia odio sem nec elit. Cras mattis consectetur purus sit\n amet fermentum.\n
\n
\n
\n\t\n
\n
\n\n\t\n
\n'})}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-js",children:"$('.btn-outline-success').on('click', function(e) {\n $('.firstCollapsible').addClass('d-none');\n $('.secondCollapsible').removeClass('d-none');\n})\n\n$('.btn-primary').on('click', function(e) {\n $('.firstCollapsible').removeClass('d-none');\n $('.secondCollapsible').addClass('d-none');\n})\n"})})]})}function u(t={}){const{wrapper:e}={...(0,s.a)(),...t.components};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(p,{...t})}):p(t)}},35578:(t,e,n)=>{n.d(e,{Z:()=>o});const o="import { useState } from 'react';\nimport Alert from 'react-bootstrap/Alert';\nimport Button from 'react-bootstrap/Button';\n\nfunction AlertDismissible() {\n const [show, setShow] = useState(true);\n\n return (\n <>\n \n My Alert\n \n Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget\n lacinia odio sem nec elit. Cras mattis consectetur purus sit amet\n fermentum.\n
\n
\n \n \n
\n \n\n {!show && }\n >\n );\n}\n\nexport default AlertDismissible;\n"},11151:(t,e,n)=>{n.d(e,{Z:()=>i,a:()=>r});var o=n(67294);const s={},a=o.createContext(s);function r(t){const e=o.useContext(a);return o.useMemo((function(){return"function"==typeof t?t(e):{...e,...t}}),[e,t])}function i(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(s):t.components||s:r(t.components),o.createElement(a.Provider,{value:e},t.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/3fcd2212.6c329c12.js b/assets/js/3fcd2212.6c329c12.js
deleted file mode 100644
index 8ca36da..0000000
--- a/assets/js/3fcd2212.6c329c12.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[9257],{24634:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>x,contentTitle:()=>y,default:()=>T,frontMatter:()=>u,metadata:()=>f,toc:()=>j});var t=o(85893),r=o(11151);const i="import Button from 'react-bootstrap/Button';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nfunction DisabledExample() {\n return (\n Tooltip!}>\n \n \n \n \n );\n}\n\nexport default DisabledExample;\n",a="import { useState, useRef } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Overlay from 'react-bootstrap/Overlay';\n\nfunction Example() {\n const [show, setShow] = useState(false);\n const target = useRef(null);\n\n return (\n <>\n \n \n {({\n placement: _placement,\n arrowProps: _arrowProps,\n show: _show,\n popper: _popper,\n hasDoneInitialMeasure: _hasDoneInitialMeasure,\n ...props\n }) => (\n \n Simple tooltip\n
\n )}\n \n >\n );\n}\n\nexport default Example;\n",l="import Button from 'react-bootstrap/Button';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nfunction TriggerExample() {\n const renderTooltip = (props) => (\n \n Simple tooltip\n \n );\n\n return (\n \n \n \n );\n}\n\nexport default TriggerExample;\n",s='import Button from \'react-bootstrap/Button\';\nimport Image from \'react-bootstrap/Image\';\nimport OverlayTrigger from \'react-bootstrap/OverlayTrigger\';\n\nfunction TriggerRendererProp() {\n return (\n Check out this avatar}\n >\n {({ ref, ...triggerHandler }) => (\n \n )}\n \n );\n}\n\nexport default TriggerRendererProp;\n',p='import Button from \'react-bootstrap/Button\';\nimport OverlayTrigger from \'react-bootstrap/OverlayTrigger\';\nimport Popover from \'react-bootstrap/Popover\';\n\nconst popover = (\n \n Popover right\n \n And here\'s some amazing content. It\'s very engaging.\n right?\n \n \n);\n\nconst Example = () => (\n \n \n \n);\n\nrender();\n',c="import { useState, useRef } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Overlay from 'react-bootstrap/Overlay';\nimport Popover from 'react-bootstrap/Popover';\n\nfunction Example() {\n const [show, setShow] = useState(false);\n const [target, setTarget] = useState(null);\n const ref = useRef(null);\n\n const handleClick = (event) => {\n setShow(!show);\n setTarget(event.target);\n };\n\n return (\n \n
\n\n
\n \n Popover bottom\n \n Holy guacamole! Check this info.\n \n \n \n
\n );\n}\n\nexport default Example;\n",d="import Button from 'react-bootstrap/Button';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Popover from 'react-bootstrap/Popover';\n\nfunction PopoverPositionedExample() {\n return (\n <>\n {['top', 'right', 'bottom', 'left'].map((placement) => (\n \n {`Popover ${placement}`}\n \n Holy guacamole! Check this info.\n \n \n }\n >\n \n \n ))}\n >\n );\n}\n\nexport default PopoverPositionedExample;\n",h="import React, { useEffect, useState } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Popover from 'react-bootstrap/Popover';\n\nconst UpdatingPopover = React.forwardRef(\n ({ popper, children, show: _, ...props }, ref) => {\n useEffect(() => {\n console.log('updating!');\n popper.scheduleUpdate();\n }, [children, popper]);\n\n return (\n \n {children}\n \n );\n },\n);\n\nconst longContent = `\n Very long\n Multiline content\n that is engaging and what-not\n`;\nconst shortContent = 'Short and sweet!';\n\nfunction Example() {\n const [content, setContent] = useState(shortContent);\n\n useEffect(() => {\n const timerId = setInterval(() => {\n setContent(content === shortContent ? longContent : shortContent);\n }, 3000);\n\n return () => clearInterval(timerId);\n });\n\n return (\n {content}\n }\n >\n \n \n );\n}\n\nrender();\n",v="import OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nfunction TooltipInCopyExample() {\n const Link = ({ id, children, title }) => (\n {title}}>\n {children}\n \n );\n\n return (\n \n Tight pants next level keffiyeh{' '}\n \n you probably\n {' '}\n haven't heard of them. Farm-to-table seitan, mcsweeney's fixie sustainable\n quinoa 8-bit american apparel{' '}\n \n have a\n {' '}\n terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo\n thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's\n cleanse vegan chambray. A really ironic artisan{' '}\n \n whatever keytar\n \n , scenester farm-to-table banksy Austin{' '}\n \n twitter handle\n {' '}\n freegan cred raw denim single-origin coffee viral.\n
\n );\n}\n\nexport default TooltipInCopyExample;\n",g="import { useState, useRef } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Overlay from 'react-bootstrap/Overlay';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nfunction Example() {\n const [show, setShow] = useState(false);\n const target = useRef(null);\n\n return (\n <>\n \n \n {(props) => (\n \n My Tooltip\n \n )}\n \n >\n );\n}\n\nexport default Example;\n",m="import Button from 'react-bootstrap/Button';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nfunction TooltipPositionedExample() {\n return (\n <>\n {['top', 'right', 'bottom', 'left'].map((placement) => (\n \n Tooltip on {placement}.\n \n }\n >\n \n \n ))}\n >\n );\n}\n\nexport default TooltipPositionedExample;\n",u={title:"Overlay",description:"A set of components for positioning beautiful overlays, tooltips, popovers, and anything else you need."},y=void 0,f={id:"components/overlays",title:"Overlay",description:"A set of components for positioning beautiful overlays, tooltips, popovers, and anything else you need.",source:"@site/docs/components/overlays.mdx",sourceDirName:"components",slug:"/components/overlays",permalink:"/docs/components/overlays",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"Overlay",description:"A set of components for positioning beautiful overlays, tooltips, popovers, and anything else you need."},sidebar:"sidebar",previous:{title:"Offcanvas",permalink:"/docs/components/offcanvas"},next:{title:"Pagination",permalink:"/docs/components/pagination"}},x={},j=[{value:"Overview",id:"overview",level:2},{value:"Overlay",id:"overlay",level:2},{value:"Creating an Overlay",id:"creating-an-overlay",level:3},{value:"Customizing Overlay rendering",id:"customizing-overlay-rendering",level:3},{value:"OverlayTrigger",id:"overlaytrigger",level:2},{value:"Customizing trigger behavior",id:"customizing-trigger-behavior",level:3},{value:"Tooltips",id:"tooltips",level:2},{value:"Examples",id:"examples",level:3},{value:"Popovers",id:"popovers",level:2},{value:"Examples",id:"examples-1",level:3},{value:"Disabled elements",id:"disabled-elements",level:2},{value:"Changing containers",id:"changing-containers",level:2},{value:"Updating position dynamically",id:"updating-position-dynamically",level:2},{value:"API",id:"api",level:2},{value:"Overlay",id:"overlay-1",level:3},{value:"OverlayTrigger",id:"overlaytrigger-1",level:3},{value:"Tooltip",id:"tooltip",level:3},{value:"Popover",id:"popover",level:3},{value:"PopoverBody",id:"popoverbody",level:3},{value:"PopoverHeader",id:"popoverheader",level:3}];function b(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,r.a)(),...e.components},{CodeBlock:o,PropsTable:u}=n;return o||O("CodeBlock",!0),u||O("PropsTable",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,t.jsx)(n.p,{children:"Things to know about the React-Bootstrap Overlay components."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Overlays rely on the third-party library ",(0,t.jsx)(n.a,{href:"https://popper.js.org",children:"Popper.js"}),".\nIt's included automatically with React-Bootstrap, but you should reference the API\nfor more advanced use cases."]}),"\n",(0,t.jsxs)(n.li,{children:["The ",(0,t.jsx)(n.code,{children:""})," and ",(0,t.jsx)(n.code,{children:""})," components do not position themselves. Instead the\n",(0,t.jsx)(n.code,{children:""})," (or ",(0,t.jsx)(n.code,{children:""}),") components, inject ",(0,t.jsx)(n.code,{children:"ref"})," and ",(0,t.jsx)(n.code,{children:"style"})," props."]}),"\n",(0,t.jsxs)(n.li,{children:["Tooltip expects specific props injected by the ",(0,t.jsx)(n.code,{children:""})," component."]}),"\n",(0,t.jsxs)(n.li,{children:["Tooltips for ",(0,t.jsx)(n.code,{children:"disabled"})," elements must be triggered on a wrapper element."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"overlay",children:"Overlay"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"Overlay"})," is the fundamental component for positioning and\ncontrolling tooltip visibility. It's a wrapper around Popper.js, that\nadds support for transitions, and visibility toggling."]}),"\n",(0,t.jsx)(n.h3,{id:"creating-an-overlay",children:"Creating an Overlay"}),"\n",(0,t.jsxs)(n.p,{children:['Overlays consist of at least two elements, the "overlay", the element to\nbe positioned, as well as a "target", the element the overlay is\npositioned in relation to. You can also have an "arrow" element,\nlike the tooltips and popovers, but that is optional. Be sure to\ncheck out the ',(0,t.jsx)(n.a,{href:"https://popper.js.org/docs/v2",children:"Popper"}),"\ndocumentation for more details about the injected props."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:a}),"\n",(0,t.jsx)(n.h3,{id:"customizing-overlay-rendering",children:"Customizing Overlay rendering"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"Overlay"})," injects a number of props that you can use to customize the\nrendering behavior. There is a case where you would need to show the overlay\nbefore ",(0,t.jsx)(n.code,{children:"Popper"})," can measure and position it properly. In React-Bootstrap,\ntooltips and popovers sets the opacity and position to avoid issues where\nthe initial positioning of the overlay is incorrect. See the\n",(0,t.jsx)(n.a,{href:"https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Tooltip.tsx",children:"Tooltip"}),"\nimplementation for an example on how this is done."]}),"\n",(0,t.jsx)(n.h2,{id:"overlaytrigger",children:"OverlayTrigger"}),"\n",(0,t.jsxs)(n.p,{children:["Since the above pattern is pretty common, but verbose, we've included\n",(0,t.jsx)(n.code,{children:""}),' component to help with common\nuse-cases. It even has functionality to delayed show or hides, and a few\ndifferent "trigger" events you can mix and match.']}),"\n",(0,t.jsxs)(n.p,{children:["Note that triggering components must be able to accept ",(0,t.jsx)(n.a,{href:"https://reactjs.org/docs/refs-and-the-dom.html",children:"a ref"}),"\nsince ",(0,t.jsx)(n.code,{children:""})," will attempt to add one. You can use\n",(0,t.jsx)(n.a,{href:"https://reactjs.org/docs/react-api.html#reactforwardref",children:"forwardRef()"})," for function components."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:l}),"\n",(0,t.jsx)(n.h3,{id:"customizing-trigger-behavior",children:"Customizing trigger behavior"}),"\n",(0,t.jsxs)(n.p,{children:["For more advanced behaviors ",(0,t.jsx)(n.code,{children:""})," accepts a\nfunction child that passes in the injected ",(0,t.jsx)(n.code,{children:"ref"})," and event\nhandlers that correspond to the configured ",(0,t.jsx)(n.code,{children:"trigger"})," prop."]}),"\n",(0,t.jsx)(n.p,{children:"You can manually apply the props to any element you want or split them\nup. The example below shows how to position the overlay to a different\nelement than the one that triggers its visibility."}),"\n",(0,t.jsx)(n.admonition,{title:"Pro Tip",type:"info",children:(0,t.jsxs)(n.p,{children:["Using the function form of OverlayTrigger avoids a\n",(0,t.jsx)(n.code,{children:"React.findDOMNode"})," call, for those trying to be strict mode\ncompliant."]})}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:s}),"\n",(0,t.jsx)(n.h2,{id:"tooltips",children:"Tooltips"}),"\n",(0,t.jsx)("p",{className:"lead",children:(0,t.jsxs)(n.p,{children:["A tooltip component for a more stylish alternative to that anchor tag"," ","\n",(0,t.jsx)("code",{children:"title"})," attribute."]})}),"\n",(0,t.jsx)(n.h3,{id:"examples",children:"Examples"}),"\n",(0,t.jsx)(n.p,{children:"Hover over the links below to see tooltips."}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:v}),"\n",(0,t.jsxs)(n.p,{children:["You can pass the ",(0,t.jsx)(n.code,{children:"Overlay"})," injected props directly to the\nTooltip component."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:g}),"\n",(0,t.jsxs)(n.p,{children:["Or pass a Tooltip element to ",(0,t.jsx)(n.code,{children:"OverlayTrigger"})," instead."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:m}),"\n",(0,t.jsx)(n.h2,{id:"popovers",children:"Popovers"}),"\n",(0,t.jsx)("p",{className:"lead",children:"A popover component, like those found in iOS."}),"\n",(0,t.jsx)(n.h3,{id:"examples-1",children:"Examples"}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,noInline:!0,children:p}),"\n",(0,t.jsxs)(n.p,{children:["As with ",(0,t.jsx)(n.code,{children:""}),"s, you can control the placement of the Popover."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:d}),"\n",(0,t.jsx)(n.h2,{id:"disabled-elements",children:"Disabled elements"}),"\n",(0,t.jsxs)(n.p,{children:["Elements with the ",(0,t.jsx)(n.code,{children:"disabled"})," attribute aren\u2019t interactive,\nmeaning users cannot hover or click them to trigger a popover (or\ntooltip). As a workaround, you\u2019ll want to trigger the overlay from a\nwrapper ",(0,t.jsx)(n.code,{children:""})," or ",(0,t.jsx)(n.code,{children:"
"})," and override the ",(0,t.jsx)(n.code,{children:"pointer-events"})," on the\ndisabled element."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:i}),"\n",(0,t.jsx)(n.h2,{id:"changing-containers",children:"Changing containers"}),"\n",(0,t.jsxs)(n.p,{children:["You can specify a ",(0,t.jsx)(n.code,{children:"container"})," to control the DOM element the\noverlay is appended to. This is especially useful when styles conflict\nwith your Overlays."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,previewClassName:"overlay-contained",children:c}),"\n",(0,t.jsx)(n.h2,{id:"updating-position-dynamically",children:"Updating position dynamically"}),"\n",(0,t.jsx)(n.p,{children:"Since we can't know every time your overlay changes size, to reposition\nit, you need to take manual action if you want to update the position of\nan Overlay in response to a change."}),"\n",(0,t.jsxs)(n.p,{children:["For this, the Overlay component also injects a ",(0,t.jsx)(n.code,{children:"popper"}),"\nprop with a ",(0,t.jsx)(n.code,{children:"scheduleUpdate()"})," method that an overlay\ncomponent can use to reposition itself."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,noInline:!0,children:h}),"\n",(0,t.jsx)(n.h2,{id:"api",children:"API"}),"\n",(0,t.jsx)(n.h3,{id:"overlay-1",children:"Overlay"}),"\n",(0,t.jsx)(u,{name:"Overlay"}),"\n",(0,t.jsx)(n.h3,{id:"overlaytrigger-1",children:"OverlayTrigger"}),"\n",(0,t.jsx)(u,{name:"OverlayTrigger"}),"\n",(0,t.jsx)(n.h3,{id:"tooltip",children:"Tooltip"}),"\n",(0,t.jsx)(u,{name:"Tooltip"}),"\n",(0,t.jsx)(n.h3,{id:"popover",children:"Popover"}),"\n",(0,t.jsx)(u,{name:"Popover"}),"\n",(0,t.jsx)(n.h3,{id:"popoverbody",children:"PopoverBody"}),"\n",(0,t.jsx)(u,{name:"PopoverBody"}),"\n",(0,t.jsx)(n.h3,{id:"popoverheader",children:"PopoverHeader"}),"\n",(0,t.jsx)(u,{name:"PopoverHeader"})]})}function T(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(b,{...e})}):b(e)}function O(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},11151:(e,n,o)=>{o.d(n,{Z:()=>l,a:()=>a});var t=o(67294);const r={},i=t.createContext(r);function a(e){const n=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),t.createElement(i.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/3fcd2212.e3a6692b.js b/assets/js/3fcd2212.e3a6692b.js
new file mode 100644
index 0000000..4936db6
--- /dev/null
+++ b/assets/js/3fcd2212.e3a6692b.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[9257],{259:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>x,contentTitle:()=>y,default:()=>T,frontMatter:()=>u,metadata:()=>f,toc:()=>j});var t=o(85893),r=o(11151);const i="import Button from 'react-bootstrap/Button';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nfunction DisabledExample() {\n return (\n Tooltip!}>\n \n \n \n \n );\n}\n\nexport default DisabledExample;\n",a="import { useState, useRef } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Overlay from 'react-bootstrap/Overlay';\n\nfunction Example() {\n const [show, setShow] = useState(false);\n const target = useRef(null);\n\n return (\n <>\n \n \n {({\n placement: _placement,\n arrowProps: _arrowProps,\n show: _show,\n popper: _popper,\n hasDoneInitialMeasure: _hasDoneInitialMeasure,\n ...props\n }) => (\n \n Simple tooltip\n
\n )}\n \n >\n );\n}\n\nexport default Example;\n",l="import Button from 'react-bootstrap/Button';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nfunction TriggerExample() {\n const renderTooltip = (props) => (\n \n Simple tooltip\n \n );\n\n return (\n \n \n \n );\n}\n\nexport default TriggerExample;\n",s='import Button from \'react-bootstrap/Button\';\nimport Image from \'react-bootstrap/Image\';\nimport OverlayTrigger from \'react-bootstrap/OverlayTrigger\';\n\nfunction TriggerRendererProp() {\n return (\n Check out this avatar}\n >\n {({ ref, ...triggerHandler }) => (\n \n )}\n \n );\n}\n\nexport default TriggerRendererProp;\n',p='import Button from \'react-bootstrap/Button\';\nimport OverlayTrigger from \'react-bootstrap/OverlayTrigger\';\nimport Popover from \'react-bootstrap/Popover\';\n\nconst popover = (\n \n Popover right\n \n And here\'s some amazing content. It\'s very engaging.\n right?\n \n \n);\n\nconst Example = () => (\n \n \n \n);\n\nrender();\n',c="import { useState, useRef } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Overlay from 'react-bootstrap/Overlay';\nimport Popover from 'react-bootstrap/Popover';\n\nfunction Example() {\n const [show, setShow] = useState(false);\n const [target, setTarget] = useState(null);\n const ref = useRef(null);\n\n const handleClick = (event) => {\n setShow(!show);\n setTarget(event.target);\n };\n\n return (\n \n
\n\n
\n \n Popover bottom\n \n Holy guacamole! Check this info.\n \n \n \n
\n );\n}\n\nexport default Example;\n",d="import Button from 'react-bootstrap/Button';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Popover from 'react-bootstrap/Popover';\n\nfunction PopoverPositionedExample() {\n return (\n <>\n {['top', 'right', 'bottom', 'left'].map((placement) => (\n \n {`Popover ${placement}`}\n \n Holy guacamole! Check this info.\n \n \n }\n >\n \n \n ))}\n >\n );\n}\n\nexport default PopoverPositionedExample;\n",h="import React, { useEffect, useState } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Popover from 'react-bootstrap/Popover';\n\nconst UpdatingPopover = React.forwardRef(\n ({ popper, children, show: _, ...props }, ref) => {\n useEffect(() => {\n console.log('updating!');\n popper.scheduleUpdate();\n }, [children, popper]);\n\n return (\n \n {children}\n \n );\n },\n);\n\nconst longContent = `\n Very long\n Multiline content\n that is engaging and what-not\n`;\nconst shortContent = 'Short and sweet!';\n\nfunction Example() {\n const [content, setContent] = useState(shortContent);\n\n useEffect(() => {\n const timerId = setInterval(() => {\n setContent(content === shortContent ? longContent : shortContent);\n }, 3000);\n\n return () => clearInterval(timerId);\n });\n\n return (\n {content}\n }\n >\n \n \n );\n}\n\nrender();\n",v="import OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nconst Link = ({ id, children, title }) => (\n {title}}>\n {children}\n \n);\n\nfunction TooltipInCopyExample() {\n return (\n \n Tight pants next level keffiyeh{' '}\n \n you probably\n {' '}\n haven't heard of them. Farm-to-table seitan, mcsweeney's fixie sustainable\n quinoa 8-bit american apparel{' '}\n \n have a\n {' '}\n terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo\n thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's\n cleanse vegan chambray. A really ironic artisan{' '}\n \n whatever keytar\n \n , scenester farm-to-table banksy Austin{' '}\n \n twitter handle\n {' '}\n freegan cred raw denim single-origin coffee viral.\n
\n );\n}\n\nrender();\n",g="import { useState, useRef } from 'react';\nimport Button from 'react-bootstrap/Button';\nimport Overlay from 'react-bootstrap/Overlay';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nfunction Example() {\n const [show, setShow] = useState(false);\n const target = useRef(null);\n\n return (\n <>\n \n \n {(props) => (\n \n My Tooltip\n \n )}\n \n >\n );\n}\n\nexport default Example;\n",m="import Button from 'react-bootstrap/Button';\nimport OverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Tooltip from 'react-bootstrap/Tooltip';\n\nfunction TooltipPositionedExample() {\n return (\n <>\n {['top', 'right', 'bottom', 'left'].map((placement) => (\n \n Tooltip on {placement}.\n \n }\n >\n \n \n ))}\n >\n );\n}\n\nexport default TooltipPositionedExample;\n",u={title:"Overlay",description:"A set of components for positioning beautiful overlays, tooltips, popovers, and anything else you need."},y=void 0,f={id:"components/overlays",title:"Overlay",description:"A set of components for positioning beautiful overlays, tooltips, popovers, and anything else you need.",source:"@site/docs/components/overlays.mdx",sourceDirName:"components",slug:"/components/overlays",permalink:"/docs/components/overlays",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"Overlay",description:"A set of components for positioning beautiful overlays, tooltips, popovers, and anything else you need."},sidebar:"sidebar",previous:{title:"Offcanvas",permalink:"/docs/components/offcanvas"},next:{title:"Pagination",permalink:"/docs/components/pagination"}},x={},j=[{value:"Overview",id:"overview",level:2},{value:"Overlay",id:"overlay",level:2},{value:"Creating an Overlay",id:"creating-an-overlay",level:3},{value:"Customizing Overlay rendering",id:"customizing-overlay-rendering",level:3},{value:"OverlayTrigger",id:"overlaytrigger",level:2},{value:"Customizing trigger behavior",id:"customizing-trigger-behavior",level:3},{value:"Tooltips",id:"tooltips",level:2},{value:"Examples",id:"examples",level:3},{value:"Popovers",id:"popovers",level:2},{value:"Examples",id:"examples-1",level:3},{value:"Disabled elements",id:"disabled-elements",level:2},{value:"Changing containers",id:"changing-containers",level:2},{value:"Updating position dynamically",id:"updating-position-dynamically",level:2},{value:"API",id:"api",level:2},{value:"Overlay",id:"overlay-1",level:3},{value:"OverlayTrigger",id:"overlaytrigger-1",level:3},{value:"Tooltip",id:"tooltip",level:3},{value:"Popover",id:"popover",level:3},{value:"PopoverBody",id:"popoverbody",level:3},{value:"PopoverHeader",id:"popoverheader",level:3}];function b(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,r.a)(),...e.components},{CodeBlock:o,PropsTable:u}=n;return o||O("CodeBlock",!0),u||O("PropsTable",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,t.jsx)(n.p,{children:"Things to know about the React-Bootstrap Overlay components."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Overlays rely on the third-party library ",(0,t.jsx)(n.a,{href:"https://popper.js.org",children:"Popper.js"}),".\nIt's included automatically with React-Bootstrap, but you should reference the API\nfor more advanced use cases."]}),"\n",(0,t.jsxs)(n.li,{children:["The ",(0,t.jsx)(n.code,{children:""})," and ",(0,t.jsx)(n.code,{children:""})," components do not position themselves. Instead the\n",(0,t.jsx)(n.code,{children:""})," (or ",(0,t.jsx)(n.code,{children:""}),") components, inject ",(0,t.jsx)(n.code,{children:"ref"})," and ",(0,t.jsx)(n.code,{children:"style"})," props."]}),"\n",(0,t.jsxs)(n.li,{children:["Tooltip expects specific props injected by the ",(0,t.jsx)(n.code,{children:""})," component."]}),"\n",(0,t.jsxs)(n.li,{children:["Tooltips for ",(0,t.jsx)(n.code,{children:"disabled"})," elements must be triggered on a wrapper element."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"overlay",children:"Overlay"}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"Overlay"})," is the fundamental component for positioning and\ncontrolling tooltip visibility. It's a wrapper around Popper.js, that\nadds support for transitions, and visibility toggling."]}),"\n",(0,t.jsx)(n.h3,{id:"creating-an-overlay",children:"Creating an Overlay"}),"\n",(0,t.jsxs)(n.p,{children:['Overlays consist of at least two elements, the "overlay", the element to\nbe positioned, as well as a "target", the element the overlay is\npositioned in relation to. You can also have an "arrow" element,\nlike the tooltips and popovers, but that is optional. Be sure to\ncheck out the ',(0,t.jsx)(n.a,{href:"https://popper.js.org/docs/v2",children:"Popper"}),"\ndocumentation for more details about the injected props."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:a}),"\n",(0,t.jsx)(n.h3,{id:"customizing-overlay-rendering",children:"Customizing Overlay rendering"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"Overlay"})," injects a number of props that you can use to customize the\nrendering behavior. There is a case where you would need to show the overlay\nbefore ",(0,t.jsx)(n.code,{children:"Popper"})," can measure and position it properly. In React-Bootstrap,\ntooltips and popovers sets the opacity and position to avoid issues where\nthe initial positioning of the overlay is incorrect. See the\n",(0,t.jsx)(n.a,{href:"https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Tooltip.tsx",children:"Tooltip"}),"\nimplementation for an example on how this is done."]}),"\n",(0,t.jsx)(n.h2,{id:"overlaytrigger",children:"OverlayTrigger"}),"\n",(0,t.jsxs)(n.p,{children:["Since the above pattern is pretty common, but verbose, we've included\n",(0,t.jsx)(n.code,{children:""}),' component to help with common\nuse-cases. It even has functionality to delayed show or hides, and a few\ndifferent "trigger" events you can mix and match.']}),"\n",(0,t.jsxs)(n.p,{children:["Note that triggering components must be able to accept ",(0,t.jsx)(n.a,{href:"https://reactjs.org/docs/refs-and-the-dom.html",children:"a ref"}),"\nsince ",(0,t.jsx)(n.code,{children:""})," will attempt to add one. You can use\n",(0,t.jsx)(n.a,{href:"https://reactjs.org/docs/react-api.html#reactforwardref",children:"forwardRef()"})," for function components."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:l}),"\n",(0,t.jsx)(n.h3,{id:"customizing-trigger-behavior",children:"Customizing trigger behavior"}),"\n",(0,t.jsxs)(n.p,{children:["For more advanced behaviors ",(0,t.jsx)(n.code,{children:""})," accepts a\nfunction child that passes in the injected ",(0,t.jsx)(n.code,{children:"ref"})," and event\nhandlers that correspond to the configured ",(0,t.jsx)(n.code,{children:"trigger"})," prop."]}),"\n",(0,t.jsx)(n.p,{children:"You can manually apply the props to any element you want or split them\nup. The example below shows how to position the overlay to a different\nelement than the one that triggers its visibility."}),"\n",(0,t.jsx)(n.admonition,{title:"Pro Tip",type:"info",children:(0,t.jsxs)(n.p,{children:["Using the function form of OverlayTrigger avoids a\n",(0,t.jsx)(n.code,{children:"React.findDOMNode"})," call, for those trying to be strict mode\ncompliant."]})}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:s}),"\n",(0,t.jsx)(n.h2,{id:"tooltips",children:"Tooltips"}),"\n",(0,t.jsx)("p",{className:"lead",children:(0,t.jsxs)(n.p,{children:["A tooltip component for a more stylish alternative to that anchor tag"," ","\n",(0,t.jsx)("code",{children:"title"})," attribute."]})}),"\n",(0,t.jsx)(n.h3,{id:"examples",children:"Examples"}),"\n",(0,t.jsx)(n.p,{children:"Hover over the links below to see tooltips."}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,noInline:!0,children:v}),"\n",(0,t.jsxs)(n.p,{children:["You can pass the ",(0,t.jsx)(n.code,{children:"Overlay"})," injected props directly to the\nTooltip component."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:g}),"\n",(0,t.jsxs)(n.p,{children:["Or pass a Tooltip element to ",(0,t.jsx)(n.code,{children:"OverlayTrigger"})," instead."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:m}),"\n",(0,t.jsx)(n.h2,{id:"popovers",children:"Popovers"}),"\n",(0,t.jsx)("p",{className:"lead",children:"A popover component, like those found in iOS."}),"\n",(0,t.jsx)(n.h3,{id:"examples-1",children:"Examples"}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,noInline:!0,children:p}),"\n",(0,t.jsxs)(n.p,{children:["As with ",(0,t.jsx)(n.code,{children:""}),"s, you can control the placement of the Popover."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:d}),"\n",(0,t.jsx)(n.h2,{id:"disabled-elements",children:"Disabled elements"}),"\n",(0,t.jsxs)(n.p,{children:["Elements with the ",(0,t.jsx)(n.code,{children:"disabled"})," attribute aren\u2019t interactive,\nmeaning users cannot hover or click them to trigger a popover (or\ntooltip). As a workaround, you\u2019ll want to trigger the overlay from a\nwrapper ",(0,t.jsx)(n.code,{children:""})," or ",(0,t.jsx)(n.code,{children:"
"})," and override the ",(0,t.jsx)(n.code,{children:"pointer-events"})," on the\ndisabled element."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,children:i}),"\n",(0,t.jsx)(n.h2,{id:"changing-containers",children:"Changing containers"}),"\n",(0,t.jsxs)(n.p,{children:["You can specify a ",(0,t.jsx)(n.code,{children:"container"})," to control the DOM element the\noverlay is appended to. This is especially useful when styles conflict\nwith your Overlays."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,previewClassName:"overlay-contained",children:c}),"\n",(0,t.jsx)(n.h2,{id:"updating-position-dynamically",children:"Updating position dynamically"}),"\n",(0,t.jsx)(n.p,{children:"Since we can't know every time your overlay changes size, to reposition\nit, you need to take manual action if you want to update the position of\nan Overlay in response to a change."}),"\n",(0,t.jsxs)(n.p,{children:["For this, the Overlay component also injects a ",(0,t.jsx)(n.code,{children:"popper"}),"\nprop with a ",(0,t.jsx)(n.code,{children:"scheduleUpdate()"})," method that an overlay\ncomponent can use to reposition itself."]}),"\n",(0,t.jsx)(o,{language:"jsx",live:!0,noInline:!0,children:h}),"\n",(0,t.jsx)(n.h2,{id:"api",children:"API"}),"\n",(0,t.jsx)(n.h3,{id:"overlay-1",children:"Overlay"}),"\n",(0,t.jsx)(u,{name:"Overlay"}),"\n",(0,t.jsx)(n.h3,{id:"overlaytrigger-1",children:"OverlayTrigger"}),"\n",(0,t.jsx)(u,{name:"OverlayTrigger"}),"\n",(0,t.jsx)(n.h3,{id:"tooltip",children:"Tooltip"}),"\n",(0,t.jsx)(u,{name:"Tooltip"}),"\n",(0,t.jsx)(n.h3,{id:"popover",children:"Popover"}),"\n",(0,t.jsx)(u,{name:"Popover"}),"\n",(0,t.jsx)(n.h3,{id:"popoverbody",children:"PopoverBody"}),"\n",(0,t.jsx)(u,{name:"PopoverBody"}),"\n",(0,t.jsx)(n.h3,{id:"popoverheader",children:"PopoverHeader"}),"\n",(0,t.jsx)(u,{name:"PopoverHeader"})]})}function T(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(b,{...e})}):b(e)}function O(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},11151:(e,n,o)=>{o.d(n,{Z:()=>l,a:()=>a});var t=o(67294);const r={},i=t.createContext(r);function a(e){const n=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),t.createElement(i.Provider,{value:n},e.children)}}}]);
\ No newline at end of file
diff --git a/assets/js/458e1426.1116edab.js b/assets/js/458e1426.b907faa6.js
similarity index 99%
rename from assets/js/458e1426.1116edab.js
rename to assets/js/458e1426.b907faa6.js
index f641251..a8a87da 100644
--- a/assets/js/458e1426.1116edab.js
+++ b/assets/js/458e1426.b907faa6.js
@@ -1 +1 @@
-"use strict";(self.webpackChunkreact_bootstrap_website=self.webpackChunkreact_bootstrap_website||[]).push([[7788],{93531:(e,o,n)=>{n.r(o),n.d(o,{assets:()=>F,contentTitle:()=>u,default:()=>h,frontMatter:()=>c,metadata:()=>x,toc:()=>f});var r=n(85893),t=n(11151);const l='import Form from \'react-bootstrap/Form\';\n\nfunction TextControlsExample() {\n return (\n \n Email address\n \n \n \n Example textarea\n \n \n \n );\n}\n\nexport default TextControlsExample;\n',a='import Form from \'react-bootstrap/Form\';\n\nfunction InputSizesExample() {\n return (\n <>\n \n
\n \n
\n \n >\n );\n}\n\nexport default InputSizesExample;\n',i='import Form from \'react-bootstrap/Form\';\n\nfunction FormControlDisabledExample() {\n return (\n <>\n \n
\n \n >\n );\n}\n\nexport default FormControlDisabledExample;\n',s='import Form from \'react-bootstrap/Form\';\n\nfunction InputReadOnlyExample() {\n return (\n \n );\n}\n\nexport default InputReadOnlyExample;\n',m='import Col from \'react-bootstrap/Col\';\nimport Form from \'react-bootstrap/Form\';\nimport Row from \'react-bootstrap/Row\';\n\nfunction PlaintextExample() {\n return (\n \n \n Email\n \n \n \n \n \n\n \n \n Password\n \n \n \n \n \n \n );\n}\n\nexport default PlaintextExample;\n',p='import Form from \'react-bootstrap/Form\';\n\nfunction FormFileExample() {\n return (\n <>\n \n Default file input example\n \n \n \n Multiple files input example\n \n \n \n Disabled file input example\n \n \n \n Small file input example\n \n \n \n Large file input example\n \n \n >\n );\n}\n\nexport default FormFileExample;\n',d='import Form from \'react-bootstrap/Form\';\n\nfunction ColorPickerExample() {\n return (\n <>\n Color picker\n \n >\n );\n}\n\nexport default ColorPickerExample;\n',c={title:"Form controls",description:"Give textual form controls like s and