You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -268,9 +268,9 @@ Note that if any of your custom prop names clash with the base element's prop na
268
268
By default, the `children` prop is excluded from the type information of the resulting component. This is because, usually, components would want to add their own children to the underlying element or have specific control over how values provided to `children` are dealt with.
269
269
270
270
```tsx
271
-
import {ComponentBuilders} from './ComponentBuilders';
271
+
import {ComponentExtenders} from './ComponentExtenders';
If you want to give users the ability to add a `children` prop, add it to your custom props type information.
282
282
283
283
```tsx
284
-
import {ComponentBuilders} from './ComponentBuilders';
284
+
import {ComponentExtenders} from './ComponentExtenders';
285
285
286
-
const HeaderView = ComponentBuilders.header<{
286
+
const HeaderView = ComponentExtenders.header<{
287
287
children?:string
288
288
}>((Header, props) => {
289
289
const { children } =props.pluck('children');
@@ -302,9 +302,9 @@ For whatever reason, you might want to have access to all the props that were pa
302
302
To do this, use the `props.peek` function.
303
303
304
304
```tsx
305
-
import {ComponentBuilders} from './ComponentBuilders';
305
+
import {ComponentExtenders} from './ComponentExtenders';
306
306
307
-
const Link = ComponentBuilders.a((A, props) => {
307
+
const Link = ComponentExtenders.a((A, props) => {
308
308
const { href } =props.peek(); // The underlying anchor element will still receive all the passed props (including href), but you can still 'peek' at the value.
309
309
return <AclassName="app-link">
310
310
My AwesomeLink
@@ -319,9 +319,9 @@ When working with function components, React prevents you from treating a ref li
319
319
You can pluck a ref as you would expect.
320
320
321
321
```tsx
322
-
import {ComponentBuilders} from './ComponentBuilders';
322
+
import {ComponentExtenders} from './ComponentExtenders';
By default, the `createComponentBuilderGroup` factory function gives you access to all the html elements listed in React's JSX.IntrinsicElements interface.
361
+
By default, the `createComponentExtenderGroup` factory function gives you access to all the html elements listed in React's JSX.IntrinsicElements interface.
362
362
363
363
You're able to use them with this convenient syntax.
364
364
365
365
```tsx
366
-
// in ComponentBuilders.ts
366
+
// in ComponentExtenders.ts
367
367
368
-
import {createComponentBuilderGroup} from 'react-extend-components';
368
+
import {createComponentExtenderGroup} from 'react-extend-components';
Please note, however, that the types for all the props of the root element (`MainAppButton` in this case), are marked as optional by default. If you would like to require those props, add them to your [custom props](#customizing-props) generic parameter.
395
395
396
-
You can also define custom components in an `additionalComponents` object when creating your component builder so that you can access them on the builder using the same dot syntax that you would use for html elements.
396
+
You can also define custom components in an `additionalComponents` object when creating your component extender so that you can access them on the extender using the same dot syntax that you would use for html elements.
397
397
398
398
```tsx
399
-
// in ComponentBuilders.ts
399
+
// in ComponentExtenders.ts
400
400
401
401
import {MainAppButton} from './MainAppButton';
402
-
import {createComponentBuilderGroup} from 'react-extend-components';
402
+
import {createComponentExtenderGroup} from 'react-extend-components';
- **Functions:** Functions are merged together by passing a new function to the prop that first calls the inner component function prop, then the outer one. The return value of the outer prop is the one that the function will return (if the outer prop is set).
Please note that in a situation where either the inner prop or outer prop is a function and the other one is a non-function (with the exception of null and undefined), the outer prop will always replace the inner one.
@@ -592,9 +592,9 @@ Note that you will only receive props in the `outerProps` object that were not '
592
592
You are provided with the `defaultMergeFn` in the merge function, which you may find useful if you'd just like to merge a specific prop but have the library handle the rest.
0 commit comments