react-samurai-toolkit

Is a bunch of helpers to work with react and nextjs

react-samurai-toolkit/classes

react-samurai-toolkit/utils

addClassIf([condition], [ifClass], [elseClass]) ⇒ string

add a class if the condition is true.

Kind: global function
Returns: string - ifClass or elseClass

| Param | Type | Default | Description | | --- | --- | --- | --- | | [condition] | boolean | true | condition to display the class | | [ifClass] | string | null | class to be returned if condition is true | | [elseClass] | string | null | class to be returned if condition is false |

Example

// returns 'on'
addClassIf(true, 'on', 'off')

Example

// returns 'off'
addClassIf(false, 'on', 'off') 

concatClass(...classes) ⇒ string

concatenate all params as a class

Kind: global function
Returns: string - all the params together as html classes

| Param | Type | Description | | --- | --- | --- | | ...classes | string | classes to be concatenated |

Example

// returns 'my-component my-second-class ...'
concatClass('my-component', 'my-second-class', '...')

toggleClass([condition], [baseClass], [classIf], [classElse]) ⇒ string

add base class and a class if certain condition is true

Kind: global function
Returns: string - the base class and if or else class

| Param | Type | Default | Description | | --- | --- | --- | --- | | [condition] | boolean | false | condition to display de class | | [baseClass] | string | null | the base class is always in the return | | [classIf] | string | null | the class to be returned if condition is true | | [classElse] | string | null | the class to be returned if condition is false |

Example

// returns 'base-classe on'
toggleClass(true, 'base-class', 'on', 'off')

Example

// returns 'base-class off'
toggleClass(false, 'base-class', 'on', 'off')

gst([styles], [className]) ⇒ string

gst is a acronym to getStyleClass - A css module function to get and return classes inside styles object

Kind: global function
Returns: string - string of classes

| Param | Type | Default | Description | | --- | --- | --- | --- | | [styles] | object | {} | The css module object with hashed classes | | [className] | string | "''" | The classes separated by space |

Example

const styles = { 
   container: 'Component_container__WQ2uP', 
   content: 'Component_content__uP24c' 
} 
getStyleClass(styles, 'container content')
// returns 'Component_container__WQ2uP Component_content__uP24c'

c([styles], [baseClass], ...restClass)

A function mix all helpers together, to prevent verbose code like concacClass(gst(styles, 'container'), 'on')

Kind: global function

| Param | Type | Default | Description | | --- | --- | --- | --- | | [styles] | object | {} | object css module of css or scss file | | [baseClass] | string | "''" | A classes in styles object separated by space | | ...restClass | string | | strings that will be included (concatenated) with base class |

Example

const styles = { 
   container: 'Component_container__WQ2uP', 
   content: 'Component_content__uP24c' 
} 
c(styles, 'container content', 'my-other-class')
// returns 'Component_container__WQ2uP Component_content__uP24c my-other-class' 

isServer() ⇒ boolean

help method to detect if code runs on server

Kind: global function
Example

// returns true if is in server
isServer()

isClient() ⇒ boolean

help method to detect if code runs on client

Kind: global function
Example

// returns true if is in server
isClient()

getRefValue(ref) ⇒ any

get input value from react ref.

Kind: global function
Returns: any - Current value of input

| Param | Type | Description | | --- | --- | --- | | ref | object | the ref of element |

Example

getRefValue(inputRef)

renderIf([condition], [ifComponent], [elseComponent]) ⇒ ReactComponent

method to render conditionally a react component.

Kind: global function

| Param | Type | Default | Description | | --- | --- | --- | --- | | [condition] | boolean | true | condition to display the component | | [ifComponent] | string | null | component to render if condition is true | | [elseComponent] | string | null | component to render if condition is false |

Example

const loading = true
renderIf(loading, (<span>loading</span>)) // return <span>loading</span>

Example

const loading = false
renderIf(loading, (<span>loading</span>), (<span>loaded</span>)) // <span>loaded</span>

redirect404([redirect])

return this method on getServerSideProps to 404 redirect

Kind: global function

| Param | Type | Default | Description | | --- | --- | --- | --- | | [redirect] | object | | redirect object |

Example

export async function getServerSideProps(res){

    try {

        return await SomePromise();

    } catch(e){
        return redirect404()
    }
}

moneyFormatter([lang], [style], [currency]) ⇒ Object

Method to format number as money / currency

Kind: global function
Returns: Object - - new Intl.NumberFormat(lang, { style, currency })

| Param | Type | Default | Description | | --- | --- | --- | --- | | [lang] | string | "pt-BR" | language | | [style] | string | "currency" | style | | [currency] | string | "BRL" | currency |

Example

const Formarter = moneyFormatter();
Formarter.format(10) // 'R$ 10,00'

isProduction() ⇒ boolean

check if process.env.NODE_ENV === 'production'

Kind: global function
Example

isProduction() // true or false

cacheServeSideProps([res], [maxage], [revalidate])

cache server side props (Only production env)

Kind: global function

| Param | Type | Default | Description | | --- | --- | --- | --- | | [res] | object | | response object from nextjs | | [maxage] | string | 900 | maxage param | | [revalidate] | string | 910 | revalidate param |

Example

export async function getServerSideProps(res){

    //will cache this request
    cacheServeSideProps(res);

    try {
        return await SomePromise();

    } catch(e){
        return redirect404()
    }
}