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=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),H=(n,e)=>{for(var i in e)l(n,i,{get:e[i],enumerable:!0})},s=(n,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let h of p(e))!m.call(n,h)&&h!==i&&l(n,h,{get:()=>e[h],enumerable:!(o=d(e,h))||o.enumerable});return n};var x=(n,e,i)=>(i=n!=null?c(u(n)):{},s(e||!n||!n.__esModule?l(i,"default",{value:n,enumerable:!0}):i,n)),f=n=>s(l({},"__esModule",{value:!0}),n);var g=y((T,r)=>{r.exports=_jsx_runtime});var q={};H(q,{default:()=>k,frontmatter:()=>w});var t=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(n){let e=Object.assign({h2:"h2",pre:"pre",code:"code",p:"p",h3:"h3",blockquote:"blockquote"},n.components);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-js",children:`import { Highlight } from '@chakra-ui/react' `})}),` `,(0,t.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,t.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,t.jsx)(e.code,{children:"query"})," prop. Use the ",(0,t.jsx)(e.code,{children:"style"}),` prop to define the styles for the highlighted parts.`]}),` `,(0,t.jsx)(e.h3,{id:"highlight-a-word",children:"Highlight a word"}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-jsx",children:` With the Highlight component, you can spotlight words. `})}),` `,(0,t.jsx)(e.h3,{id:"usage-with-heading",children:"Usage with Heading"}),` `,(0,t.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,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-jsx",children:` With the Highlight component, you can spotlight words. `})}),` `,(0,t.jsx)(e.h3,{id:"highlight-with-multiple-words",children:"Highlight with multiple words"}),` `,(0,t.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,t.jsx)(e.code,{children:"query"})," prop"]}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-jsx",children:` With the Highlight component, you can spotlight, emphasize and accentuate words. `})}),` `,(0,t.jsxs)(e.blockquote,{children:[` `,(0,t.jsx)(e.p,{children:`The query for the strings is case insensitive. Notice "Accentuate" in the query.`}),` `]}),` `,(0,t.jsx)(e.h3,{id:"highlight-substrings",children:"Highlight substrings"}),` `,(0,t.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,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-jsx",children:` Search result for: "spot" Spotlight bulb Spot cleaner Spot ceiling `})}),` `,(0,t.jsx)(e.h3,{id:"customizing-rendered-elements",children:"Customizing rendered elements"}),` `,(0,t.jsxs)(e.p,{children:[`In cases where you want to customize multiple rendered elements and their styles, use the `,(0,t.jsx)(e.code,{children:"useHighlight"})," hook."]}),` `,(0,t.jsx)(e.pre,{children:(0,t.jsx)(e.code,{className:"language-js",children:`import { useHighlight } from '@chakra-ui/react' `})}),` `,(0,t.jsx)(e.pre,{children:(0,t.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(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,Object.assign({},n,{children:(0,t.jsx)(a,n)})):a(n)}var k=b;return f(q);})(); ;return Component;

Highlight

styles

Props#

queryrequired

styles

`styles`

`queryrequired`

`styles`