react-conditional
Render React elements conditionally, based on a chain of predicates specified on the
current React class.
Initializing
require ( ' react-conditional ' ) ( React )
React . showIf ( ... )
Api:
.showIf(conditional)
Starts the "showIf" chain, accepting a conditional
which may be either an array, string, or function. If it's an array,
the conditional passes if all elements in the array pass. If it's a string it's assumed to be a method on the current
object which returns a boolean. By default, the rendering
method is called when the chain passes.
var Demo = React . createClass ( {
someMethod : function ( ) { return true ; } ,
render : React . showIf ( ' someMethod ' ) ,
rendering : function ( ) {
return React . DOM . h1 ( { } , ' Hello World ' ) ;
}
} ) ;
.and(conditional)
Same as .showIf, but it may be chained:
var Demo = React . createClass ( {
someMethod : function ( ) { return true ; } ,
someOtherMethod : function ( ) { return false ; } ,
render : React . showIf ( ' someMethod ' ) . and ( ' someOtherMethod ' ) ,
rendering : function ( ) {
return React . DOM . h1 ( { } , ' Hello World ' ) ;
}
} ) ;
.or(conditional)
Allows for adding an "or" conditional:
var Demo = React . createClass ( {
someMethod : function ( ) { return true ; } ,
someOtherMethod : function ( ) { return false ; } ,
render : React . showIf ( ' someMethod ' ) . or ( ' somethingElse ' ) ,
rendering : function ( ) {
return React . DOM . h1 ( { } , ' Hello World ' ) ;
}
} ) ;
.rendering(methodName)
Allows for specifying the method name on the current element that should be rendered when the chain passes,
defaulting to "rendering".
var Demo = React . createClass ( {
someMethod : function ( ) { return true ; } ,
someOtherMethod : function ( ) { return false ; } ,
render : React . showIf ( ' someMethod ' ) . or ( ' somethingElse ' ) . rendering ( ' thisMethod ' ) ,
thisMethod : function ( ) {
return React . DOM . h1 ( { } , ' Hello World ' ) ;
}
} ) ;
.fallback(methodName)
Allow for specifying a different fallback if the current chain does not pass:
var Demo = React . createClass ( {
someMethod : function ( ) { return true ; } ,
someOtherMethod : function ( ) { return false ; } ,
render : React . showIf ( ' someMethod ' ) . or ( ' somethingElse ' ) . fallback ( ' fallbackMethod ' ) ,
rendering : function ( ) {
return React . DOM . div ( { } , ' Passed ' ) ;
} ,
fallbackMethod : function ( ) {
return React . DOM . h1 ( { } , ' Empty ' ) ;
}
} ) ;
License
MIT