Allow children and fallback props be render props

CHANGELOG.MD

@@ -0,0 +1,10 @@
+# v1.0.7
+- Switch
+    - Add debug props, if `debug={true}` console.warn if no `Case` match nor `Default`
+- Case
+    - children props can now be a render props. `children={matchedValue => (<span>{matchedValue}</span>)}`
+- Default
+    - children props can now be a render props. `children={() => (<span>Default</span>)}`
+- Match
+    - children props can now be a render props. `children={matchValue => (<span>{matchValue}</span>)}`
+    - same for `fallback` props

README.md

@@ -19,6 +19,8 @@ import {Match, Switch, Case, Default} from 'react-logic-match'
 
 class Example extends React.Component {
   render () {
+    const error = new Error('msg in jsx');
+
     return (
         <>
             <Match condition={'foo' === 'bar'}>
@@ -33,6 +35,9 @@ class Example extends React.Component {
             <Match condition={'bar' === 'bar'}>
               <p>'bar' === 'bar'</p>
             </Match>
+            <Match condition={error}>{() => {
+              <p>{error.message}</p>
+            }</Match>
 
             <Switch value={1}>
               <Case value={0}>
@@ -67,6 +72,8 @@ See `<Switch value>-<Case value>-<Default>` as a simple js `switch-case-default`
 
 For more info you can check the source code. It's strictly typed and not so much complicated
 
+Since v1.0.7, children and fallbacks props can be render props (a function who return JSX)
+
 ## License
 
 MIT © [tpoisseau](https://github.com/tpoisseau)

dist/Case.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { ICaseProps } from "./ICase";
 export default class Case<T> extends React.Component<ICaseProps<T>> {
-    render(): JSX.Element | (JSX.Element & string) | (JSX.Element & number) | (JSX.Element & false) | (JSX.Element & true) | (JSX.Element & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (JSX.Element & React.ReactNodeArray) | (JSX.Element & React.ReactPortal);
+    render(): JSX.Element | JSX.Element[] | (((value: T) => JSX.Element | JSX.Element[]) & string) | (((value: T) => JSX.Element | JSX.Element[]) & number) | (((value: T) => JSX.Element | JSX.Element[]) & false) | (((value: T) => JSX.Element | JSX.Element[]) & true) | (((value: T) => JSX.Element | JSX.Element[]) & React.ReactNodeArray);
 }

dist/Default.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { IDefaultProps } from "./IDefault";
 export default class Default extends React.Component<IDefaultProps> {
-    render(): JSX.Element | (JSX.Element & string) | (JSX.Element & number) | (JSX.Element & false) | (JSX.Element & true) | (JSX.Element & React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) | (JSX.Element & React.ReactNodeArray) | (JSX.Element & React.ReactPortal);
+    render(): JSX.Element | JSX.Element[] | ((() => JSX.Element | JSX.Element[]) & string) | ((() => JSX.Element | JSX.Element[]) & number) | ((() => JSX.Element | JSX.Element[]) & false) | ((() => JSX.Element | JSX.Element[]) & true) | ((() => JSX.Element | JSX.Element[]) & React.ReactNodeArray);
 }

dist/ICase.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
+declare type JSXElements = JSX.Element | JSX.Element[];
 export interface ICaseProps<T> {
     value: T;
-    children: JSX.Element;
+    children: JSXElements | ((value: T) => JSXElements);
 }
+export {};

dist/IDefault.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+declare type JSXElements = JSX.Element | JSX.Element[];
 export interface IDefaultProps {
-    children: JSX.Element;
+    children: JSXElements | (() => JSXElements);
 }
+export {};

dist/IMatch.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
+declare type JSXElements = JSX.Element | JSX.Element[];
 export interface IMatchProps {
     condition: boolean;
-    fallback?: JSX.Element | null | undefined;
-    children: JSX.Element;
+    fallback?: JSXElements | ((condition: boolean) => JSXElements) | null | undefined;
+    children: JSXElements | ((condition: boolean) => JSXElements);
 }
+export {};

dist/ISwitch.d.ts

@@ -5,4 +5,5 @@ export declare type SwitchChildren<T> = ReactElement<Case<T>> | ReactElement<Def
 export interface ISwitchProps<T> {
     value: T;
     children: SwitchChildren<T> | SwitchChildren<T>[];
+    debug?: boolean;
 }

dist/Match.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { IMatchProps } from "./IMatch";
-export default function Match({ condition, fallback, children }: IMatchProps): JSX.Element | null;
+export default function Match({ condition, fallback, children }: IMatchProps): JSX.Element | JSX.Element[] | null;