diff --git a/beta/src/components/MDX/ExpandableCallout.tsx b/beta/src/components/MDX/ExpandableCallout.tsx index 216f45427..e388a6bed 100644 --- a/beta/src/components/MDX/ExpandableCallout.tsx +++ b/beta/src/components/MDX/ExpandableCallout.tsx @@ -6,9 +6,10 @@ import {useRef} from 'react'; import * as React from 'react'; import cn from 'classnames'; import {IconNote} from '../Icon/IconNote'; +import {IconWarning} from '../Icon/IconWarning'; import {IconGotcha} from '../Icon/IconGotcha'; -type CalloutVariants = 'gotcha' | 'note' | 'wip'; +type CalloutVariants = 'deprecated' | 'gotcha' | 'note' | 'wip'; interface ExpandableCalloutProps { children: React.ReactNode; @@ -16,6 +17,14 @@ interface ExpandableCalloutProps { } const variantMap = { + deprecated: { + title: 'Deprecated', + Icon: IconWarning, + containerClasses: 'bg-red-5 dark:bg-red-60 dark:bg-opacity-20', + textColor: 'text-red-50 dark:text-red-40', + overlayGradient: + 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', + }, note: { title: 'Note', Icon: IconNote, diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx index 8280670b6..dc6086ab5 100644 --- a/beta/src/components/MDX/MDXComponents.tsx +++ b/beta/src/components/MDX/MDXComponents.tsx @@ -79,6 +79,9 @@ const Wip = ({children}: {children: React.ReactNode}) => ( const Gotcha = ({children}: {children: React.ReactNode}) => ( {children} ); +const Deprecated = ({children}: {children: React.ReactNode}) => ( + {children} +); const Note = ({children}: {children: React.ReactNode}) => ( {children} ); @@ -369,6 +372,7 @@ export const MDXComponents = { return
{children}
; }, Gotcha, + Deprecated, Wip, HomepageHero, Illustration, diff --git a/beta/src/content/apis/react/createFactory.md b/beta/src/content/apis/react/createFactory.md index 834d6b3b0..156e055f7 100644 --- a/beta/src/content/apis/react/createFactory.md +++ b/beta/src/content/apis/react/createFactory.md @@ -2,19 +2,143 @@ title: createFactory --- - + -This section is incomplete, please see the old docs for [createFactory.](https://reactjs.org/docs/react-api.html#createfactory) - - +This API will be removed in a future major version of React. Use [JSX](/learn/writing-markup-with-jsx) or [`createElement`](/api/react/createElement) instead. + +`createFactory` lets you create a function that produces React elements of a given type. + ```js -React.createFactory(type) +const factory = createFactory(type) ``` + +--- + +## Usage {/*usage*/} + +### Creating React elements {/*creating-react-elements*/} + +You shouldn't use `createFactory` in new code. In the existing code, it's typically used as an alternative to [JSX:](/learn/writing-markup-with-jsx) + + + +```js App.js +import { createFactory } from 'react'; + +const button = createFactory('button'); + +export default function App() { + return button({ + onClick: () => { + alert('Clicked!') + } + }, 'Click me'); +} +``` + + + +Since `createFactory` has been deprecated, you need to remove it from your project's code. + +For example, you can convert it to use [`createElement`](/api/react/createElement) instead of `createFactory` like this: + + + +```js App.js +import { createElement } from 'react'; + +export default function App() { + return createElement('button', { + onClick: () => { + alert('Clicked!') + } + }, 'Click me'); +}; +``` + + + +Alternatively, you can convert it to use [JSX:](/learn/writing-markup-with-jsx) + + + +```js App.js +export default function App() { + return ( + + ); +}; +``` + + + +Every pattern that uses `createFactory` can be converted to either of the two styles above. + + + +The full implementation of `createFactory` looks like this: + +```js +import { createElement } from 'react'; + +function createFactory(type) { + return createElement.bind(null, type); +} +``` + +If your project uses `createFactory` a lot, you may copy this helper into your project or publish it on npm. + + + +--- + +## Reference {/*reference*/} + +### `createFactory(type)` {/*createfactory*/} + + + + +This API will be removed in a future major version of React. Use [JSX](/learn/writing-markup-with-jsx) or [`createElement`](/api/react/createElement) instead. + + + +Call `createFactory(type)` to create a factory function which produces React elements of a given `type`. + +```js +import { createFactory } from 'react'; + +const button = createFactory('button'); +``` + +Then you can use it to create React elements without JSX: + +```js +export default function App() { + return button({ + onClick: () => { + alert('Clicked!') + } + }, 'Click me'); +} +``` + +#### Parameters {/*parameters*/} + +* `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/apis/react/Fragment)). + +#### Returns {/*returns*/} + +Returns a factory function. That factory function receives a `props` object as the first argument, followed by a list of `...children` arguments, and returns a React element with the given `type`, `props` and `children`. diff --git a/beta/src/sidebarReference.json b/beta/src/sidebarReference.json index 40132eebd..1ff72d4ff 100644 --- a/beta/src/sidebarReference.json +++ b/beta/src/sidebarReference.json @@ -37,8 +37,7 @@ }, { "title": "createFactory", - "path": "/apis/react/createFactory", - "wip": true + "path": "/apis/react/createFactory" }, { "title": "createRef",