Members
componentMap
object of all react components available for RJX
- Source:
Methods
displayComponent(options) → {Boolean}
Used to evaluate whether or not to render a component
Parameters:
Name |
Type |
Description |
options |
Object
|
Properties
Name |
Type |
Description |
rjx |
Object
|
Valid RJX JSON |
props |
Object
|
Props to test comparison values against, usually Object.assign(rjx.props,rjx.asyncprops,rjx.thisprops,rjx.windowprops) |
|
- Source:
Returns:
returns true if all comparisons are true or if using or comparisons, at least one condition is true
-
Type
-
Boolean
Example
const sampleRJX = {
component: 'div',
props: {
id: 'generatedRJX',
className: 'rjx',
bigNum: 1430931039,
smallNum: 0.425,
falsey: false,
truthy: true,
},
children: 'some div',
};
const testRJX = Object.assign({}, sampleRJX, {
comparisonprops: [{
left: ['truthy',],
operation:'==',
right:['falsey',],
}],
});
displayComponent({ rjx: testRJX, props: testRJX2.props, }) // => false
getAdvancedBinding() → {Boolean}
Use to test if can bind components this context for react-redux-router
- Source:
Returns:
true if browser is not IE or old android / chrome
-
Type
-
Boolean
getBoundedComponents(options, boundedComponents) → {Object}
getBoundedComponents returns reactComponents with certain elements that have this bounded to select components in the boundedComponents list
Parameters:
Name |
Type |
Description |
options |
Object
|
options for getBoundedComponents
Properties
Name |
Type |
Description |
reactComponents |
Object
|
all react components available for RJX |
|
boundedComponents |
Array.<string>
|
list of components to bind RJX this context (usually helpful for navigation and redux-router) |
- Source:
Returns:
reactComponents object of all react components available for RJX
-
Type
-
Object
getChildrenProperty(options) → {Array.<Object>|String}
returns a valid rjx.children property
Parameters:
Name |
Type |
Description |
options |
Object
|
Properties
Name |
Type |
Attributes |
Default |
Description |
rjx |
Object
|
<optional>
|
{}
|
Valid RJX JSON |
props |
Object
|
<optional>
|
options.rjx.children
|
Props to pull children Object.assign(rjx.props,rjx.asyncprops,rjx.thisprops,rjx.windowprops) |
|
- Source:
Returns:
returns a valid rjx.children property that's either an array of RJX objects or a string
-
Type
-
Array.<Object>
|
String
Example
const sampleRJX = {
component: 'div',
props: {
id: 'generatedRJX',
className:'rjx',
},
children: [
{
component: 'p',
props: {
style: {
color: 'red',
},
},
children:'hello world',
},
{
component: 'div',
children: [
{
component: 'ul',
children: [
{
component: 'li',
children:'list',
},
],
},
],
},
],
};
const RJXChildren = getChildrenProperty({ rjx: sampleRJX, }); //=> [ [rjx Object],[rjx Object]]
const RJXChildrenPTag = getChildrenProperty({ rjx: sampleRJX.children[ 0 ], }); //=>hello world
getChildrenProps(options) → {Object|String}
Used to pass properties down to child components if passprops is set to true
Parameters:
Name |
Type |
Description |
options |
Object
|
Properties
Name |
Type |
Attributes |
Default |
Description |
rjx |
Object
|
<optional>
|
{}
|
Valid RJX JSON |
childrjx |
Object
|
<optional>
|
{}
|
Valid RJX JSON |
renderIndex |
Number
|
|
|
React key property |
props |
Object
|
<optional>
|
options.rjx.props
|
Props to pull children Object.assign(rjx.props,rjx.asyncprops,rjx.thisprops,rjx.windowprops) |
|
- Source:
Returns:
returns a valid Valid RJX Child object or a string
-
Type
-
Object
|
String
getComponentFromLibrary(options) → {function|undefined}
returns a react component from a component library
Parameters:
Name |
Type |
Description |
options |
Object
|
options for getComponentFromLibrary
Properties
Name |
Type |
Attributes |
Default |
Description |
componentLibraries |
Object
|
<optional>
|
{}
|
react component library like bootstrap |
rjx |
Object
|
<optional>
|
{}
|
any valid RJX JSON |
|
- Source:
Returns:
react component from react library like bootstrap, material design or bulma
-
Type
-
function
|
undefined
getComponentFromMap(options) → {string|function|class}
returns a react element from rjx.component
Parameters:
Name |
Type |
Description |
options |
Object
|
options for getComponentFromMap
Properties
Name |
Type |
Attributes |
Default |
Description |
rjx |
object
|
<optional>
|
{}
|
any valid RJX JSON object |
reactComponents |
Object
|
<optional>
|
{}
|
react components to render |
componentLibraries |
Object
|
<optional>
|
{}
|
react components to render from another component library like bootstrap or bulma |
logError |
function
|
<optional>
|
console.error
|
error logging function |
debug |
boolean
|
<optional>
|
false
|
use debug messages |
|
- Source:
Returns:
valid react element
-
Type
-
string
|
function
|
class
Example
// returns react elements
getComponentFromMap({rjx:{component:'div'}})=>div
getComponentFromMap({rjx:{component:'MyModal'},reactComponents:{MyModal:MyModal extends React.Component}})=>MyModal
getComponentFromMap({rjx:{component:'reactBootstap.nav'},componentLibraries:{reactBootstrap,}})=>reactBootstap.nav
getComponentProps(options) → {Object}
Resolves rjx.__dangerouslyInsertComponents into an object that turns each value into a React components. This is typically used in a library like Recharts where you pass custom components for chart ticks or plot points.
Parameters:
Name |
Type |
Description |
options |
Object
|
Properties
Name |
Type |
Attributes |
Default |
Description |
rjx |
Object
|
|
|
Valid RJX JSON |
resources |
Object
|
<optional>
|
{}
|
object to use for asyncprops, usually a result of an asynchronous call |
|
- Source:
Returns:
resolved object of React Components
-
Type
-
Object
getComputedProps(options)
Returns computed properties for React Components and any property that's prefixed with __ is a computedProperty
Parameters:
Name |
Type |
Description |
options |
Object
|
Properties
Name |
Type |
Attributes |
Default |
Description |
rjx |
Object
|
|
|
Valid RJX JSON |
resources |
Object
|
<optional>
|
{}
|
object to use for asyncprops, usually a result of an asynchronous call |
renderIndex |
Number
|
|
|
number used for React key prop |
logError |
function
|
<optional>
|
console.error
|
error logging function |
componentLibraries |
Object
|
<optional>
|
|
react components to render with RJX |
useReduxState |
Boolean
|
<optional>
|
true
|
use redux props in this.props |
ignoreReduxPropsInComponentLibraries |
Boolean
|
<optional>
|
true
|
ignore redux props in this.props for component libraries, this is helpful incase these properties collide with component library element properties |
debug |
boolean
|
<optional>
|
false
|
use debug messages |
|
- Source:
Example
const testRJX = { component: 'div',
props: { id: 'generatedRJX', className: 'rjx' },
children: [ [Object] ],
asyncprops: { auth: [Array], username: [Array] },
__dangerouslyEvalProps: { getUsername: '(user={})=>user.name' },
__dangerouslyInsertComponents: { myComponent: [Object] }
const resources = {
user: {
name: 'rjx',
description: 'react withouth javascript',
},
stats: {
logins: 102,
comments: 3,
},
authentication: 'OAuth2',
};
const renderIndex = 1;
getComputedProps.call({}, {
rjx: testRJX,
resources,
renderIndex,
});
computedProps = { key: 1,
id: 'generatedRJX',
className: 'rjx',
auth: 'OAuth2',
username: 'rjx',
getUsername: [Function],
myComponent:
{ '$$typeof': Symbol(react.element),
type: 'p',
key: '8',
ref: null,
props: [Object],
_owner: null,
_store: {} } } }
getEvalProps(options) → {Object}
Used to evalute javascript and set those variables as props. getEvalProps evaluates __dangerouslyEvalProps and __dangerouslyBindEvalProps properties with eval, this is used when component properties are functions, __dangerouslyBindEvalProps is used when those functions require that this is bound to the function. For __dangerouslyBindEvalProps it must resolve an expression, so functions should be wrapped in (). I.e. (function f(x){ return this.minimum+x;})
Parameters:
Name |
Type |
Description |
options |
Object
|
Properties
Name |
Type |
Description |
rjx |
Object
|
Valid RJX JSON |
|
- Source:
Returns:
returns resolved object with evaluated javascript
-
Type
-
Object
Example
const testVals = {
auth: 'true',
username: '(user={})=>user.name',
};
const testRJX = Object.assign({}, sampleRJX, {
__dangerouslyEvalProps: testVals, __dangerouslyBindEvalProps: {
email: '(function getUser(user={}){ return this.testBound(); })',
},
});
const RJXP = getEvalProps.call({ testBound: () => 'bounded', }, { rjx: testRJX, });
const evalutedComputedFunc = RJXP.username({ name: 'bob', });
const evalutedComputedBoundFunc = RJXP.email({ email:'test@email.domain', });
// expect(RJXP.auth).to.be.true;
// expect(evalutedComputedFunc).to.eql('bob');
// expect(evalutedComputedBoundFunc).to.eql('bounded');
getFunctionFromEval(options) → {function}
Returns a new function from an options object
Parameters:
Name |
Type |
Description |
options |
Object
|
Properties
Name |
Type |
Attributes |
Default |
Description |
body |
String
|
<optional>
|
''
|
Function string body |
args |
Array.<String>
|
<optional>
|
[]
|
Function arguments |
|
- Source:
Returns:
-
Type
-
function
getFunctionFromProps(options) → {function}
Takes a function string and returns a function on either this.props or window. The function can only be 2 levels deep
Parameters:
Name |
Type |
Description |
options |
Object
|
Properties
Name |
Type |
Attributes |
Default |
Description |
propFunc |
String
|
<optional>
|
'func:'
|
function string, like func:window.LocalStorage.getItem or this.props.onClick |
allProps |
Object
|
<optional>
|
{}
|
merged computed props, Object.assign({ key: renderIndex, }, thisprops, rjx.props, asyncprops, windowprops, evalProps, insertedComponents); |
|
- Source:
Returns:
returns a function from this.props or window functions
-
Type
-
function
Example
getFunctionFromProps({ propFunc='func:this.props.onClick', }) // => this.props.onClick
getFunctionProps(options) → {Object}
Returns a resolved object from function strings that has functions pulled from rjx.__functionProps
Parameters:
Name |
Type |
Description |
options |
Object
|
Properties
Name |
Type |
Attributes |
Default |
Description |
rjx |
Object
|
|
|
Valid RJX JSON |
allProps |
Object
|
<optional>
|
{}
|
merged computed props, Object.assign({ key: renderIndex, }, thisprops, rjx.props, asyncprops, windowprops, evalProps, insertedComponents); |
|
- Source:
Returns:
resolved object of functions from function strings
-
Type
-
Object
getReactComponent(returnFactoryopt, reactComponentopt) → {function}
Returns a new React Component
Parameters:
Name |
Type |
Attributes |
Default |
Description |
returnFactory |
Object
|
<optional>
|
true
|
returns a React component if true otherwise returns Component Class |
reactComponent |
Object
|
<optional>
|
{}
|
an object of functions used for create-react-class
Properties
Name |
Type |
Description |
render.body |
Object
|
Valid RJX JSON |
getDefaultProps.body |
String
|
return an object for the default props |
getInitialState.body |
String
|
return an object for the default state |
|
- Source:
- See:
-
Returns:
-
Type
-
function
getRenderedJSON(rjx, resources) → {function}
Use React.createElement and RJX JSON to create React elements
Parameters:
Name |
Type |
Description |
rjx |
object
|
any valid RJX JSON object |
resources |
object
|
any additional resource used for asynchronous properties |
Properties:
Name |
Type |
Description |
this |
object
|
options for getRenderedJSON
Properties
Name |
Type |
Attributes |
Default |
Description |
componentLibraries |
Object
|
<optional>
|
|
react components to render with RJX |
debug |
boolean
|
<optional>
|
false
|
use debug messages |
logError |
function
|
<optional>
|
console.error
|
error logging function |
boundedComponents |
Array.<string>
|
<optional>
|
[]
|
list of components that require a bound this context (usefult for redux router) |
|
- Source:
Returns:
React element via React.createElement
-
Type
-
function
Example
// Uses react to create the equivalent JSX <myComponent style={{color:blue}}>hello world</myComponent>
rjx.getRenderedJSON({component:'myCompnent',props:{style:{color:'blue'}},children:'hello world'})
getRJXChildren(options)
returns React Child Elements via RJX
Parameters:
Name |
Type |
Description |
options |
*
|
|
Properties:
Name |
Type |
Description |
this |
object
|
options for getRenderedJSON
Properties
Name |
Type |
Attributes |
Default |
Description |
componentLibraries |
Object
|
<optional>
|
|
react components to render with RJX |
debug |
boolean
|
<optional>
|
false
|
use debug messages |
logError |
function
|
<optional>
|
console.error
|
error logging function |
boundedComponents |
Array.<string>
|
<optional>
|
[]
|
list of components that require a bound this context (usefult for redux router) |
|
- Source:
getRJXProps(traverseObjectopt, options) → {Object}
It uses traverse on a traverseObject to returns a resolved object on propName. So if you're making an ajax call and want to pass properties into a component, you can assign them using asyncprops and reference object properties by an array of property paths
Parameters:
Name |
Type |
Attributes |
Default |
Description |
traverseObject |
Object
|
<optional>
|
{}
|
the object that contains values of propName |
options |
Object
|
|
|
Properties
Name |
Type |
Attributes |
Default |
Description |
rjx |
Object
|
|
|
Valid RJX JSON |
propName |
Object
|
<optional>
|
'asyncprops'
|
Property on RJX to resolve values onto, i.e (asyncprops,thisprops,windowprops) |
|
- Source:
Returns:
resolved object
-
Type
-
Object
Example
const traverseObject = {
user: {
name: 'rjx',
description: 'react withouth javascript',
},
stats: {
logins: 102,
comments: 3,
},
authentication: 'OAuth2',
};
const testRJX = {
component: 'div',
props: {
id: 'generatedRJX',
className:'rjx',
},
asyncprops:{
auth: [ 'authentication', ],
username: [ 'user', 'name', ],
},
children: [
{
component: 'p',
props: {
style: {
color: 'red',
fontWeight:'bold',
},
},
children:'hello world',
},
],
};
const RJXP = getRJXProps({ rjx: testRJX, traverseObject, });
// => {
// auth: 'OAuth2',
// username: 'rjx'
// }
//finally resolves:
const testRJX = {
component: 'div',
props: {
id: 'generatedRJX',
className:'rjx',
auth: 'OAuth2',
username: 'rjx',
},
children: [
{
component: 'p',
props: {
style: {
color: 'red',
fontWeight:'bold',
},
},
children:'hello world',
},
],
};
getWindowComponents(options) → {Object}
Returns a resolved object that has React Components pulled from window.__rjx_custom_elements
Parameters:
Name |
Type |
Description |
options |
Object
|
Properties
Name |
Type |
Attributes |
Default |
Description |
rjx |
Object
|
|
|
Valid RJX JSON |
allProps |
Object
|
<optional>
|
{}
|
merged computed props, Object.assign({ key: renderIndex, }, thisprops, rjx.props, asyncprops, windowprops, evalProps, insertedComponents); |
|
- Source:
Returns:
resolved object of with React Components from a window property window.__rjx_custom_elements
-
Type
-
Object
rjxHTMLString(config) → {string}
Use ReactDOMServer.renderToString to render html from RJX
Parameters:
Name |
Type |
Description |
config |
object
|
options used to inject html via ReactDOM.render
Properties
Name |
Type |
Description |
rjx |
object
|
any valid RJX JSON object |
resources |
object
|
any additional resource used for asynchronous properties |
|
Properties:
Name |
Type |
Description |
this |
object
|
options for getRenderedJSON |
- Source:
Returns:
React genereated html via RJX JSON
-
Type
-
string
Example
// Uses react to create <div class="rjx-generated"><p style="color:red;">hello world</p></div>
rjx.rjxHTMLString({ rjx: { component: 'div', props:{className:'rjx-generated',children:[{ component:'p',props:{style:{color:'red'}}, children:'hello world' }]}}, });
rjxRender(config)
Use RJX without any configuration to render RJX JSON to HTML and insert RJX into querySelector using ReactDOM.render
Parameters:
Name |
Type |
Description |
config |
object
|
options used to inject html via ReactDOM.render
Properties
Name |
Type |
Description |
rjx |
object
|
any valid RJX JSON object |
resources |
object
|
any additional resource used for asynchronous properties |
querySelector |
string
|
selector for document.querySelector |
|
Properties:
Name |
Type |
Description |
this |
object
|
options for getRenderedJSON |
- Source:
Example
// Uses react to create <!DOCTYPE html><body><div id="myApp"><div class="rjx-generated"><p style="color:red;">hello world</p></div></div></body>
rjx.rjxRender({ rjx: { component: 'div', props:{className:'rjx-generated',children:[{ component:'p',props:{style:{color:'red'}}, children:'hello world' }]}}, querySelector:'#myApp', });
traverse(paths, data) → {Object}
take an object of array paths to traverse and resolve
Parameters:
Name |
Type |
Description |
paths |
Object
|
an object to resolve array property paths |
data |
Object
|
object to traverse |
- Source:
Throws:
TypeError
Returns:
resolved object with traversed properties
-
Type
-
Object
Example
const testObj = {
user: {
name: 'rjx',
description: 'react withouth javascript',
},
stats: {
logins: 102,
comments: 3,
},
authentication: 'OAuth2',
};
const testVals = { auth: ['authentication', ], username: ['user', 'name', ], };
traverse(testVals, testObj) // =>{ auth:'OAuth2', username:'rjx', }
validateRJX(rjx, returnAllErrorsopt) → {Boolean|Array.<Error>}
Validates RJX JSON Syntax
Parameters:
Name |
Type |
Attributes |
Default |
Description |
rjx |
Object
|
|
|
RJX JSON to validate |
returnAllErrors |
Boolean
|
<optional>
|
false
|
flag to either throw error or to return all errors in an array of errors |
- Source:
Throws:
SyntaxError
|
TypeError
|
ReferenceError
Returns:
either returns true if RJX is valid, or throws validation error or returns list of errors in array
-
Type
-
Boolean
|
Array.<Error>
Example
validateRJX({component:'p',children:'hello world'})=>true
validateRJX({children:'hello world'})=>throw SyntaxError('[0001] Missing React Component')