React-snippets NPM

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}
/>