rename angularize => react2angular, minor fixes for docs

This commit is contained in:
Boris Cherny
2017-03-02 15:37:58 -08:00
parent dadddfb3c7
commit d7be1a4429
6 changed files with 33 additions and 22 deletions
+2 -1
View File
@@ -1,3 +1,4 @@
.DS_Store
node_modules
test*
test*
karma.conf.js
+16 -9
View File
@@ -1,44 +1,51 @@
# angularize [![Build Status](https://img.shields.io/circleci/project/coatue/angularize.svg?branch=master&style=flat-square)](https://circleci.com/gh/coatue/angularize) [![NPM](https://img.shields.io/npm/v/angularize.svg?style=flat-square)](https://www.npmjs.com/package/angularize) [![Apache2](https://img.shields.io/npm/l/angularize.svg?style=flat-square)](https://opensource.org/licenses/Apache2)
# react2angular [![Build Status](https://img.shields.io/circleci/project/coatue/react2angular.svg?branch=master&style=flat-square)](https://circleci.com/gh/coatue/react2angular) [![NPM](https://img.shields.io/npm/v/react2angular.svg?style=flat-square)](https://www.npmjs.com/package/react2angular) [![Apache2](https://img.shields.io/npm/l/react2angular.svg?style=flat-square)](https://opensource.org/licenses/Apache2)
> Description
> The easiest way to use React components in Angular 1!
## Installation
```sh
npm install angularize --save
npm install react2angular --save
```
## Usage
### 1. Create your React component
### 1. Create a React component
```jsx
import { Component } from 'react'
interface Props {
fooBar: number
baz: string
}
class MyComponent extends React.Component<Props, void> {
interface State {...}
class MyComponent extends Component<Props, State> {
render() {
return <div>
<p>Foo: {this.props.fooBar}</p>
<p>Bar: {this.props.bar}</p>
</div>
}
...
}
```
*Note: this example uses TypeScript, but it works just as well with vanilla JavaScript, ES6, Flow, etc.*
### 2. Expose it to Angular
```jsx
import { angularize } from 'angularize'
import { react2angular } from 'react2angular'
angular
.module('myModule', [])
.component('myComponent', angularize(MyComponent, ['foo', 'bar']))
.component('myComponent', react2angular(MyComponent, ['foo', 'bar']))
```
### 3. Use it in your Angular 1 template
### 3. Use it in your Angular 1 code
```html
<my-component
@@ -55,4 +62,4 @@ npm test
## License
Apache2
Apache2
+3
View File
@@ -0,0 +1,3 @@
machine:
node:
version: 6.7.0
+2 -2
View File
@@ -12,10 +12,10 @@ import { render, unmountComponentAtNode } from 'react-dom'
* ```ts
* type Props = { foo: number }
* class ReactComponent extends React.Component<Props, S> {}
* const AngularComponent = angularize(ReactComponent, ['foo'])
* const AngularComponent = react2angular(ReactComponent, ['foo'])
* ```
*/
export function angularize<Props>(
export function react2angular<Props>(
Class: React.ComponentClass<Props> | React.SFC<Props>,
bindingNames: (keyof Props)[]
): IComponentOptions {
+6 -6
View File
@@ -1,7 +1,7 @@
{
"name": "angularize",
"name": "react2angular",
"version": "1.0.0",
"description": "The easiest way to use React components in Angular 1",
"description": "The easiest way to use React components in Angular 1!",
"main": "index.js",
"main:esnext": "index.es2015.js",
"typings": "index.d.ts",
@@ -17,15 +17,15 @@
},
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/coatue/angularize.git"
"url": "git+ssh://git@github.com/coatue/react2angular.git"
},
"keywords": [],
"author": "Boris Cherny <boris@performancejs.com>",
"license": "Apache2",
"bugs": {
"url": "https://github.com/coatue/angularize/issues"
"url": "https://github.com/coatue/react2angular/issues"
},
"homepage": "https://github.com/coatue/angularize#readme",
"homepage": "https://github.com/coatue/react2angular#readme",
"devDependencies": {
"@types/angular-mocks": "^1.5.9",
"@types/jasmine": "^2.5.43",
@@ -42,7 +42,7 @@
"npm-run-all": "^4.0.2",
"react-addons-test-utils": "^15.4.2",
"rollupify": "^0.3.9",
"tslint": "^4.4.2",
"tslint": "^4.5.1",
"typescript": "^2.2.1",
"watchify": "^3.9.0"
},
+4 -4
View File
@@ -3,7 +3,7 @@ import 'angular-mocks'
import { $rootScope } from 'ngimport'
import * as React from 'react'
import { Simulate } from 'react-addons-test-utils'
import { angularize } from './'
import { react2angular } from './'
class TestOne extends React.Component<Props, void> {
render() {
@@ -25,8 +25,8 @@ const TestTwo: React.StatelessComponent<Props> = props =>
{props.children}
</div>
const TestAngularOne = angularize(TestOne, ['foo', 'bar', 'baz'])
const TestAngularTwo = angularize(TestTwo, ['foo', 'bar', 'baz'])
const TestAngularOne = react2angular(TestOne, ['foo', 'bar', 'baz'])
const TestAngularTwo = react2angular(TestTwo, ['foo', 'bar', 'baz'])
module('test', [])
.component('testAngularOne', TestAngularOne)
@@ -40,7 +40,7 @@ interface Props {
foo: number
}
describe('angularize', () => {
describe('react2angular', () => {
let $compile: any