A React custom renderer implementation targeted to Salesforce Lightning Component development
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs/imgs
example
lib
module
src
.babelrc
.flowconfig
.gitignore
README.md
chatter.js add react-lightning reconciler files Jan 11, 2018
force.js
package.json
ui.js
yarn.lock

README.md

React Lightning

React Lightning is a React custom renderer implementation targeted to Salesforce Lightning Component development. You can develop your own lightning component using accustomed React-style notation (e.g. JSX, ES6 classes, or SFC), embedding lightning built-in components or custom components as its content.

Install

$ npm install react-lightning

Example

  • JavaScript (should be bundled using webpack or other bundler, and added as a static resource)
import React from 'react';
import { Button, render, handleEvent } from 'react-lightning';

class CounterApp extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <p>
          Count: { count }
        </p>
        <Button
          iconName="utility:add"
          onclick={ () => this.setState({ count: this.state.count + 1 }) }
        />
        <Button
          iconName="utility:dash"
          onclick={ () => this.setState({ count: this.state.count - 1 }) }
        />
      </div>
    );
  }
}

function init(cmp) {
  render(<CounterApp />, cmp);
}

export { init, handleEvent };
  • Lightning Component (.cmp file)
<aura:component implements="flexipage:availableForAllPageTypes">
	<ltng:require scripts="{!$Resource.MyComponentApp + '/bundle.js'}"
		afterScriptsLoaded="{!c.doInit}"
	/>
	{!v.body}
</aura:component>
  • Lightning Component Controller
({
	doInit: function(cmp, event, helper) {
		window.MyComponentApp.init(cmp);
	},
	handleEvent: function(cmp, event) { // the controller method name always must be `handleEvent`
		window.MyComponentApp.handleEvent(cmp, event);
	}
})

Deploying example components to your org

This repository includes example lightning components implemented with react-lightning. To deploy the example components to your development org, do the following:

$ git clone https://github.com/stomita/react-lightning.git
$ cd react-lightning
$ npm install
$ SF_USERNAME=XXXX SF_PASSWORD=YYYY npm run deploy:example