diff --git a/packages/components/src/For/For.tsx b/packages/components/src/For/For.tsx new file mode 100644 index 0000000..fb881db --- /dev/null +++ b/packages/components/src/For/For.tsx @@ -0,0 +1,23 @@ +import type { AnyObject } from '@react-universal/utils'; + +export interface ForProps { + /** + * The render function to render each item in the array. + */ + children: (item: Exclude, index: number) => React.ReactNode; + /** + * The array to iterate overs. + */ + each: T[] | readonly T[] | undefined; + /** + * The fallback content to render when the array is empty. + */ + fallback?: React.ReactNode; +} + +export const For = ({ + each, + fallback, + children, +}: ForProps): React.ReactNode => + each?.length === 0 ? fallback || null : each?.map(children as any); diff --git a/packages/components/src/For/index.ts b/packages/components/src/For/index.ts new file mode 100644 index 0000000..3337d8f --- /dev/null +++ b/packages/components/src/For/index.ts @@ -0,0 +1,2 @@ +export { For } from './For'; +export type { ForProps } from './For'; diff --git a/packages/components/src/Show/Show.tsx b/packages/components/src/Show/Show.tsx index 6328b87..6d0f451 100644 --- a/packages/components/src/Show/Show.tsx +++ b/packages/components/src/Show/Show.tsx @@ -3,15 +3,15 @@ import { isValidElement } from 'react'; export interface ShowProps { /** - * The children to render if `when` is `true` + * The children to render if `when` is `true`. */ children: React.ReactNode | ((props: T) => React.ReactNode); /** - * The fallback content to render if `when` is `false` + * The fallback content to render if `when` is `false`. */ fallback?: React.ReactNode; /** - * If `true`, it'll render the `children` prop + * If `true`, it'll render the `children` prop. */ when: T | null | undefined; } diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index b8dec29..f858c04 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -1,6 +1,7 @@ export * from './Box'; export * from './Button'; export * from './Container'; +export * from './For'; export * from './Heading'; export * from './Image'; export * from './Link';