react-snippets
v1.0.2
Published
Helpful react components
Downloads
19
Readme
React Snippets
DEPRECATED. USE "REACT-HELPFUL" INSTEAD
Reference
Empty
Empty script component with comments
<Empty comment="empty component comment"/>
rendered as
<script>
/**
* empty component comment
*/
</script>
If
Case component rendering with arguments and comment by render callback
<Switch value={value}
props={myProps}
case={{
value1: MyComponent,
value2(props) {
return <MyAnotherComponent {...props} />
}
}}
def={DefaultComponent}
comment="switch case"
/>
Switch
Condition component rendering with arguments and comment by render callback
<If is={condition}
props={myProps}
render={ (myProps) => <Component prop={myProps} /> }
elseRender={ (myProps) => <AnotherComponent prop={myProps} /> }
comment="if condition"
/>
or just a Component
<If is={condition}
props={myProps}
render={Component}
elseRender={AnotherComponent}
comment="if condition"
/>
EventListener
Capturing event globally
<EventListener
event="click"
on={this.onClick}
/>
or by selector
<ElementEventListener
target="#target"
event="click"
on={this.onClick}
/>
Await
Await promise complete, if component will be unmounted it trigger onCancel
onStart(resolve, reject) {
setTimeout(resolve, 1000, 'some data');
}
// ...
<Await
renderComplete={({error, value}) => <div>Complete</div>}
renderPending={() => <div>Pending</div>}
onStart={ this.onStart }
onSuccess={ this.onSuccess }
onError={ this.onError }
onCancel={ this.onCancel }
/>
Sequencer
Sequenced promised functions execution
<Sequencer
actions={[configLoadAction, configDependedDataLoad]}
renderComplete={({error, values}) => <div>Complete</div>}
renderPending={() => <div>Pending</div>}
onStart={ this.onStart }
onSuccess={ this.onSuccess }
onError={ this.onError }
onCancel={ this.onCancel }
/>
Composer
Parallel promised functions execution
<Composer
actions={[friendsLoadAction, messagesLoadAction]}
renderComplete={({error, values}) => <div>Complete</div>}
renderPending={() => <div>Pending</div>}
onStart={ this.onStart }
onSuccess={ this.onSuccess }
onError={ this.onError }
onCancel={ this.onCancel }
/>
Request
Request rendering component
<Request
url={requestUrl}
query={queryObject}
method="POST"
headers={headers}
data={data}
// Basic Authentication
username={username}
password={password}
onStart={this.onStart}
onProgress={this.onProgress}
onSuccess={this.onSuccess}
onError={this.onError}
onCancel={this.onCancel}
renderComplete={this.renderOnComplete}
renderPending={this.renderOnPending}
/>
License
The MIT License Copyright (c) 2016 Ivan Zakharchenko