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
|
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
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
|
||||||
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
|
- 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
|
- 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
|
- 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
|
- 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
|
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
|
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
|
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');
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
|
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
|
Returns:
resolved object of functions from function strings
- Type
- Object
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
|
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
|
- 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
|
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
|
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
|
Properties:
Name | Type | Description |
---|---|---|
this |
object | options for getRenderedJSON |
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
|
Properties:
Name | Type | Description |
---|---|---|
this |
object | options for getRenderedJSON |
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 |
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 |
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')