react-samurai-toolkit v1.0.0

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

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

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

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

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

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

Example

getRefValue(inputRef)

renderIf(condition, ifComponent, elseComponent) ⇒ ReactComponent

method to render conditionally a react component.

Kind: global function

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

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 })

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

Example

export async function getServerSideProps(res){

    //will cache this request
    cacheServeSideProps(res);

    try {
        return await SomePromise();

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