Options
All
  • Public
  • Public/Protected
  • All
Menu

@twocatmoon/react-template-helpers

Index

Functions

Functions

For

  • For<T>(collection: T[] | {}, callbackFn: (item: T, indexOrKey: string | number, itemDetails: { isEven: boolean; isFirst: boolean; isLast: boolean; isNth: any }) => void, _returnArrayOnly?: boolean): any

  • Template helper function for handling iteration. Returns a function with the value, key/index, and helper utilities.

    example
    export default function () {
      const collection = [1, 2, 3]

      return (
        <div>
          {
            For(collection, (value, key, { isFirst, isLast, isEven }) => (
              <div key={key}>{key}: {value}</div>
            ))
          }
        </div>
      )
    })

    Type parameters

    • T = any

    Parameters

    • collection: T[] | {}

      Collection of items to display

    • callbackFn: (item: T, indexOrKey: string | number, itemDetails: { isEven: boolean; isFirst: boolean; isLast: boolean; isNth: any }) => void
        • (item: T, indexOrKey: string | number, itemDetails: { isEven: boolean; isFirst: boolean; isLast: boolean; isNth: any }): void

        • Parameters

          • item: T
          • indexOrKey: string | number
          • itemDetails: { isEven: boolean; isFirst: boolean; isLast: boolean; isNth: any }
            • isEven: boolean
            • isFirst: boolean
            • isLast: boolean
            • isNth:function
              • isNth(n: number): boolean

          Returns void

    • Optional _returnArrayOnly: boolean

    Returns any

    Iteration handler

If

  • If(condition: any, children: () => any): { Else: any; ElseIf: any; EndIf: any }

  • Template helper function for branching template logic. Returns a function that takes in a JSX, which in turn returns chainable functions (ElseIf, Else). The chain must always be terminated by calling EndIf().

    example
    export default function () {
        const state = 'foo'
      
        return (
            <div>
            {
                If(state === 'foo', () => (
                    <div>Foo</div>
                ))
                .ElseIf(state === 'bar', () => (
                    <div>Bar</div>
                ))
                .ElseIf(state === 'baz', () => (
                    <div>Baz</div>
                ))
                .Else(() => (
                    <div>Other</div>
                ))
                .EndIf()
            }
            </div>
        )
    })

    Parameters

    • condition: any

      Display condition

    • children: () => any
        • (): any

        • Returns any

    Returns { Else: any; ElseIf: any; EndIf: any }

    Chainable generator

    • Else:function
      • Else(children: () => any): { EndIf: () => FunctionComponentElement<{}> }

      • Parameters

        • children: () => any
            • (): any

            • Returns any

        Returns { EndIf: () => FunctionComponentElement<{}> }

        • EndIf: () => FunctionComponentElement<{}>
            • (): FunctionComponentElement<{}>

            • Returns FunctionComponentElement<{}>

    • ElseIf:function
      • ElseIf(elseCondition: any, children: () => any): { ElseIf(elseCondition: any, children: () => any): ...; Else(children: () => any): { EndIf: () => FunctionComponentElement<{}>; }; EndIf(): FunctionComponentElement<{}>; }

      • Parameters

        • elseCondition: any
        • children: () => any
            • (): any

            • Returns any

        Returns { ElseIf(elseCondition: any, children: () => any): ...; Else(children: () => any): { EndIf: () => FunctionComponentElement<{}>; }; EndIf(): FunctionComponentElement<{}>; }

    • EndIf:function
      • EndIf(): FunctionComponentElement<{}>

      • Returns FunctionComponentElement<{}>

Generated using TypeDoc