react-samurai-toolkit

Is a bunch of helpers to work with react and nextjs

react-samurai-toolkit/classes

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

add a class if the condition is true.

concatClass(...classes) ⇒ string

concatenate all params as a class

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

add base class and a class if certain condition is true

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

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

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

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

react-samurai-toolkit/utils

isServer() ⇒ boolean

help method to detect if code runs on server

isClient() ⇒ boolean

help method to detect if code runs on client

getRefValue(ref) ⇒ any

get input value from react ref.

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

method to render conditionally a react component.

redirect404([redirect])

return this method on getServerSideProps to 404 redirect

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

Method to format number as money / currency

isProduction() ⇒ boolean

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

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

cache server side props (Only production env)

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