Component Properties

<TWR* properties...>

tree
type: string
purpose: the backend and frontend location of where a TWR component will act
example_1:

<TWRShow tree='users/1' > ==> used for updates/destructions of a specific instance  
== 'http://remoteurl/users/1' (backend) 
== reducerState.immutable = {users: {1: {id: 1, name: 'joe'}}} (frontend)

example_2:

<TWRShow tree='users' > ==> used for create/index of a specific instance
== 'http://remoteurl/users' (backend) 
== reducerState.immutable = {users: {...the results of a create/index} (frontend)

location
type: string url
purpose: parsed to find the tree of an instance
example_1:

<TWRShow location='/admin/users/1/edit' > ==> tree = ['users', '1'] 
(Starts parse at reducer name if reducer name is in url, 
removes rest words like index, edit, and create from the end of a url)

instance type: immutable object with tree property
purpose: the frontend representation of a backend object
example_1:

<TWRShow tree='users/1'> ==> sends its children an 
    instance prop of the get response to http://remoteUrl/users/1
<TWRUpdate instance={ this.props.instance} /> ==> uses the 
    instance prop's tree to set the tree of the component

outTree
type: string
purpose: change the frontend location of where the results should be merged with.
example_1:

<TWRShow tree='users/1' outTree='users/2'> ==> Get the user 1 backend
instance and replace the user 2 frontend instance with it

content
type: object purpose: set properties to be sent with the form to create or update instances example_1:

<TWRCreate tree='users' content={{name: 'Jim'}}>
  <input type='text' name='age' value='12' />
  <button />
</TWRCreate>
==> When this form is submitted, it combines the content {name: 'Jim', age: '12'}

replace
type: Function
purpose: replace the component's DOM with a new DOM that has access to all of the component's functions
example_1:

<TWRShow tree='users/1' replace={user_1=>{
    console.log(user_1.instance(), 'returns the frontend instance')
    return <p>{user_1.instance().get('name')}</p>
}}

forceRender
type: boolean
purpose: by default, the index and show components will only render the children if their instances exist. When forceRender is true, those components will render their children no matter what.
example_1:

<TWRShow forceRender tree='users/1' >
    <p>I show no matter what! </p>
</TWRShow>

forceUpdate
type: boolean
purpose: by default, components will only update if their props change, or if the state changes. If the force update property is set, TWRComponents will always update
example_1:

var x = 1
<TWRShow forceUpdate tree='users/1' >
    <p>{x}</p>
</TWRShow>
x += 1

force
type: boolean
purpose: the index and show components will only fire a network request once per instance in the same reducer state. To fire everytime a component is mounted, set force to true.
example_1:

<TWRShow force tree='users/1' >
    <p>A new network request everytime the component is mounted</p>
</TWRShow>

tag
type: string
purpose: change the element wrapping a TWR component to specific tag
example_1:

<TWRShow tag='div' tree='users/1' >
    </p>
</TWRShow> => <div><p /></div>

startFunction
type: function
purpose: a function that fires when the component first mounts. Useful for firing mutators on load. The first argument is the component itself.

example:

<TWRCreate startFunction={TWRShow=>TWRShow.submitForm} tree='users' />
==>
Creates a user when this function is immediately loaded

noErrors
type: boolean purpose: tells a twr mutator component to not use the default error display

example:

<TWRCreate noErrors tree='users' />
==>
If an error occurs, the component will not use the default error display function