@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
39 lines (37 loc) • 1.72 kB
JavaScript
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_text = require('../text/text.cjs');
const require_mark = require('../mark/mark.cjs');
const require_use_highlight = require('./use-highlight.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/highlight/highlight.tsx
/**
* `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.
*
* @see https://yamada-ui.com/docs/components/highlight
*/
const Highlight = ({ children: text, fragment = false, query, markProps,...rest }) => {
const chunks = require_use_highlight.useHighlight({
query,
text
});
const { colorScheme } = rest;
if (fragment) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: chunks.map(({ match, text: text$1 }, index) => match ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_mark.Mark, {
colorScheme,
...markProps,
children: text$1
}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: text$1 }, index)) });
else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
...rest,
children: chunks.map(({ match, text: text$1 }, index) => match ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_mark.Mark, {
colorScheme,
...markProps,
children: text$1
}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: text$1 }, index))
});
};
//#endregion
exports.Highlight = Highlight;
//# sourceMappingURL=highlight.cjs.map