Meta tags:
description=A utility to merge multiple sets of React props, handling event handlers, className, and style props intelligently.;

Headings (most frequently used words):

mergeprops, parameters, return, value, how, merging, works, passing, function, instead, of, an, object, api, reference, preventing, base, ui, default, behavior, mergepropsn,

Text of the page (most frequently used words):
props (44), function (18), mergeprops (16), the (16), from (15), react (14), elementtype (14), #object (14), inputprops (12), type (10), merge (10), button (10), event (9), classname (9), base (9), you (8), return (7), parameters (7), merged (7), onclick (7), style (7), description (6), name (6), that (6), previous (6), locked (6), styles (6), toggle (6), svg (6), rightmost (6), default (5), this (5), handlers (5), and (5), value (4), objects (4), use (4), will (4), overwrite (4), conflicting (4), const (4), call (4), pressed (4), div (4), 99961 (4), 13336 (4), import (4), are (4), with (4), for (4), ref (4), than (3), when (3), need (3), sets (3), mergepropsn (3), returns (3), instead (3), manually (3), logic (3), can (3), left (3), right (3), componentprops (3), preventbaseuihandler (3), favorite (3), 59961 (3), 3996 (3), 66667 (3), 73334 (3), 00002 (3), index (3), not (3), internal (3), events (3), field (3), menu (3), withbaseuievent (2), componentpropswithref (2), array (2), parameter (2), table (2), accepts (2), only (2), more (2), each (2), api (2), reference (2), handler (2), your (2), point (2), passing (2), setlocked (2), usestate (2), true (2), setpressed (2), gettoggleprops (2), label (2), render (2), state (2), heartfilledicon (2), heartoutlineicon (2), span (2), unlock (2), width (2), height (2), viewbox (2), fill (2), currentcolor (2), display (2), block (2), path (2), 8667 (2), 8315 (2), 5766 (2), 1963 (2), 81176 (2), 49988 (2), evenodd (2), 86651 (2), 66666 (2), 7533 (2), 1659 (2), 73333 (2), 6752 (2), 532 (2), 3184 (2), 08159 (2), module (2), css (2), stackblitz (2), form (2), prop (2), combine (2), running (2), preventing (2), behavior (2), synthetic (2), values (2), first (2), keys (2), ltr (2), dir (2), wins (2), how (2), merging (2), works (2), multiple (2), view (2), provider (2), group (2), navigation (2), dialog (2), checkbox (2), functions, slightly, less, efficient, arguments, being, either, here, chaining, note, completely, replaces, accumulated, want, chain, must, them, argument, receives, useful, compute, next, whatever, has, already, been, show, code, export, examplepreventbaseuihandler, container, togglerow, aria, onpressedchange, unlocked, lock, 8667c7, 88761, 77561, 68121, 7611c7, 43321, 8667c1, 80856, 27481, 33294, 13336c6, 59054, 49934, 3131c8, 40868, 6663, 13336c12, 7244, 80803, 8667c14, 56601, 31801, 7616c8, 22361, 11161, 8667z, fillrule, cliprule, 8232, 75505, 75666c, 40333, 40419, 0559, 91162, 46903, 19764, 5412, 24648, 2356, 75339, 04713, 49581, 79376, 17682, 59861, 89311, 33647, 06989, 1022, 1604, 9962, 68705, 4102, 52751, 4149, 61735, 3085, 68657, 4101, 7163, 73792, 3973, 54278, 8932, 33656, 5069, 81154, 50594, 04714, 46947, 1975, 6666, 85574, 50831, 46232, 91164, 86651zm, 01387, 52394c, 5031, 40673, 6528, 05813, 3296, 8336, 7099, 0816, 8944a, 1056c, 112, 224, 0352, 1051, 248, 185, 5653, 8949, 05867, 7333, 24617, 14985, 66611, 65293, 166q, 0069, 00686, 0137, 01367c, 00003, 00459, 0046, 00927, 00914, 01393, 01377, client, tsx, using, automatically, own, stop, non, custom, primitive, mechanism, isn, available, all, always, execute, adds, calling, prevents, does, stoppropagation, preventdefault, executed, overwriting, earlier, ones, concatenated, refb, refa, kept, most, everything, except, helps, example, user, into, single, set, spread, onto, element, behaves, like, few, special, cases, common, patterns, work, expected, assign, source, markdown, utility, top, npm, github, userender, direction, csp, utils, tooltip, toolbar, toast, tabs, switch, slider, separator, select, scroll, area, radio, progress, preview, card, popover, otp, new, number, meter, menubar, input, fieldset, drawer, context, combobox, collapsible, avatar, autocomplete, alert, accordion, components, llms, txt, typescript, forms, customization, composition, animation, styling, handbook, about, community, releases, accessibility, quick, start, overview, search, skip, contents,

Text of the page (random words):
mergeprops base ui skip to contents search k navigation overview quick start accessibility releases community about handbook styling animation composition customization forms typescript llms txt components accordion alert dialog autocomplete avatar button checkbox checkbox group collapsible combobox context menu dialog drawer field fieldset form input menu menubar meter navigation menu number field otp field new popover preview card progress radio scroll area select separator slider switch tabs toast toggle toggle group toolbar tooltip utils csp provider direction provider mergeprops userender github npm 1 6 0 mergeprops top how merging works preventing base ui s default behavior passing a function instead of an object api reference mergeprops mergepropsn mergeprops a utility to merge multiple sets of react props view as markdown view source mergeprops helps you combine multiple prop objects for example internal props user props into a single set of props you can spread onto an element it behaves like object assign rightmost wins with a few special cases so common react patterns work as expected how merging works for most keys everything except classname style and event handlers the value from the rightmost object wins returns id b dir ltr mergeprops id a dir ltr id b ref is not merged only the rightmost ref is kept mergeprops ref refa ref refb classname values are concatenated right to left rightmost first mergeprops classname a classname b style objects are merged with keys from the rightmost style overwriting earlier ones event handlers are merged and executed right to left rightmost first mergeprops onclick a onclick b for react synthetic events base ui adds event preventbaseuihandler calling it prevents base ui s internal logic from running this does not call preventdefault or stoppropagation for non synthetic events custom events with primitive object values this mechanism isn t available and all handlers always execute preventing base ui s default behavior when using the function form of the render prop props are not merged automatically you can use mergeprops to combine base ui s props with your own and call preventbaseuihandler to stop base ui s internal logic from running favorite locked unlock index tsx index module css stackblitz stackblitz use client import as react from react import mergeprops from base ui react merge props import toggle from base ui react toggle import styles from index module css export default function examplepreventbaseuihandler const locked setlocked react usestate true const pressed setpressed react usestate true const gettoggleprops props react componentprops button mergeprops button props onclick event if locked event preventbaseuihandler return div classname styles container div classname styles togglerow toggle aria label favorite pressed pressed onpressedchange setpressed classname styles toggle render props state button type button gettoggleprops props state pressed heartfilledicon heartoutlineicon button span classname styles label favorite locked locked unlocked span div button type button classname styles button onclick setlocked l l locked unlock lock button div function heartfilledicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill currentcolor props style display block props style path d m7 99961 13 8667c7 88761 13 8667 7 77561 13 8315 7 68121 13 7611c7 43321 13 5766 1 59961 9 1963 1 59961 5 8667c1 59961 3 80856 3 27481 2 13336 5 33294 2 13336c6 59054 2 13336 7 49934 2 81176 7 99961 3 3131c8 49988 2 81176 9 40868 2 13336 10 6663 2 13336c12 7244 2 13336 14 3996 3 80803 14 3996 5 8667c14 3996 9 1963 8 56601 13 5766 8 31801 13 7616c8 22361 13 8315 8 11161 13 8667 7 99961 13 8667z svg function heartoutlineicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill currentcolor props style display block props style path fillrule evenodd cliprule evenodd d m7 99961 4 8232 75505 75666c 40333 40419 1 0559 86651 1 91162 86651 1 46903 0 2 66666 1 19764 2 66666 2 66667 0 5412 24648 1 2356 75339 2 04713 49581 79376 1 17682 1 59861 1 89311 2 33647 1 06989 1 1022 2 1604 1 9962 2 68705 2 4102 52751 4149 1 61735 1 3085 2 68657 2 4101 7163 73792 1 3973 1 54278 1 8932 2 33656 5069 81154 7533 1 50594 7533 2 04714 0 1 46947 1 1975 2 66667 2 6666 2 66667 85574 0 1 50831 46232 1 91164 86651zm 01387 1 52394c 5031 49988 1 40673 1 1659 2 6528 1 1659 2 05813 0 3 73333 1 6752 3 73333 3 73334 0 3 3296 5 8336 7 7099 6 0816 7 8944a 532 532 0 0 0 3184 1056c 112 0 224 0352 3184 1051 248 185 6 08159 4 5653 6 08159 7 8949 0 2 05867 1 6752 3 73334 3 7333 3 73334 1 24617 0 2 14985 66611 2 65293 1 166q 0069 00686 0137 01367c 00002 00003 00002 00002 0 0 00459 0046 00927 00914 01393 01377 svg show code passing a function instead of an object each argument can be a props object or a function that receives the merged props up to that point left to right and returns a props object this is useful when you need to compute the next props from whatever has already been merged note that the function s return value completely replaces the accumulated props up to that point if you want to chain event handlers from the previous props you must call them manually manually chaining handlers in a function const merged mergeprops onclick event handler from previous props props onclick event manually call the previous handler props onclick event your logic here api reference mergeprops this function accepts up to 5 arguments each being either a props object or a function that returns a props object if you need to merge more than 5 sets of props use mergepropsn instead parameters function parameters table parameter type default a inputprops elementtype name a description props object to merge type inputprops elementtype b inputprops elementtype name b description props object to merge the function will overwrite conflicting props from a type inputprops elementtype c inputprops elementtype name c description props object to merge the function will overwrite conflicting props from previous parameters type inputprops elementtype d inputprops elementtype name d description props object to merge the function will overwrite conflicting props from previous parameters type inputprops elementtype e inputprops elementtype name e description props object to merge the function will overwrite conflicting props from previous parameters type inputprops elementtype return value withbaseuievent react componentpropswithref elementtype mergepropsn this function accepts an array of props objects or functions that return props objects it is slightly less efficient than mergeprops so only use it when you need to merge more than 5 sets of props parameters function parameters table parameter type default props inputprops elementtype name props description array of props to merge type inputprops elementtype return value withbaseuievent react componentpropswithref elementtype