var Component=(()=>{var c=Object.create;var l=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),H=(t,e)=>{for(var i in e)l(t,i,{get:e[i],enumerable:!0})},s=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let h of p(e))!m.call(t,h)&&h!==i&&l(t,h,{get:()=>e[h],enumerable:!(o=d(e,h))||o.enumerable});return t};var x=(t,e,i)=>(i=t!=null?c(u(t)):{},s(e||!t||!t.__esModule?l(i,"default",{value:t,enumerable:!0}):i,t)),f=t=>s(l({},"__esModule",{value:!0}),t);var g=y((T,r)=>{r.exports=_jsx_runtime});var q={};H(q,{default:()=>k,frontmatter:()=>w});var n=x(g()),w={id:"highlight",category:"typography",title:"Highlight",package:"@chakra-ui/layout",description:"Highlight allows you to highlight substrings of a text."};function a(t){let e=Object.assign({h2:"h2",pre:"pre",code:"code",p:"p",h3:"h3",blockquote:"blockquote"},t.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Highlight } from '@chakra-ui/react' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsxs)(e.p,{children:[`Render the main string as children of the Highlight component, then pass the word(s) you want to highlight to the `,(0,n.jsx)(e.code,{children:"query"})," prop. Use the ",(0,n.jsx)(e.code,{children:"style"}),` prop to define the styles for the highlighted parts.`]}),` `,(0,n.jsx)(e.h3,{id:"highlight-a-word",children:"Highlight a word"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` With the Highlight component, you can spotlight words. `})}),` `,(0,n.jsx)(e.h3,{id:"usage-with-heading",children:"Usage with Heading"}),` `,(0,n.jsx)(e.p,{children:`The Highlight component can be used within any of the typography components. Here's an example of how to use it within Heading`}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` With the Highlight component, you can spotlight words. `})}),` `,(0,n.jsx)(e.h3,{id:"highlight-with-multiple-words",children:"Highlight with multiple words"}),` `,(0,n.jsxs)(e.p,{children:[`To highlight multiple phrases that have the same style, pass the substrings you want to highlight as an array to the `,(0,n.jsx)(e.code,{children:"query"})," prop"]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` With the Highlight component, you can spotlight, emphasize and accentuate words. `})}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsx)(e.p,{children:`The query for the strings is case insensitive. Notice "Accentuate" in the query.`}),` `]}),` `,(0,n.jsx)(e.h3,{id:"highlight-substrings",children:"Highlight substrings"}),` `,(0,n.jsx)(e.p,{children:`The Highlight component allows you to highlight substrings of a word. A good use case for this is in a search query.`}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Search result for: "spot" Spotlight bulb Spot cleaner Spot ceiling `})}),` `,(0,n.jsx)(e.h3,{id:"customizing-rendered-elements",children:"Customizing rendered elements"}),` `,(0,n.jsxs)(e.p,{children:[`In cases where you want to customize multiple rendered elements and their styles, use the `,(0,n.jsx)(e.code,{children:"useHighlight"})," hook."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { useHighlight } from '@chakra-ui/react' `})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`// prettier-ignore () => { const chunks = useHighlight({ text: 'With the Highlight component, you can spotlight, emphasize and accentuate words instantly', query: ['spotlight', 'emphasize', 'accentuate', 'instantly'] }) return ( {chunks.map(({ match, text }) => { if (!match) return text return text === 'instantly' ? ( {text} ) : ( {text} ) })} ) } `})})]})}function b(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(a,t)})):a(t)}var k=b;return f(q);})(); ;return Component;

Highlight

styles

Props#

queryrequired

styles

`styles`

`queryrequired`

`styles`