rename angularize => react2angular, minor fixes for docs
This commit is contained in:
+2
-1
@@ -1,3 +1,4 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
test*
|
||||
test*
|
||||
karma.conf.js
|
||||
@@ -1,44 +1,51 @@
|
||||
# angularize [](https://circleci.com/gh/coatue/angularize) [](https://www.npmjs.com/package/angularize) [](https://opensource.org/licenses/Apache2)
|
||||
# react2angular [](https://circleci.com/gh/coatue/react2angular) [](https://www.npmjs.com/package/react2angular) [](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
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
machine:
|
||||
node:
|
||||
version: 6.7.0
|
||||
@@ -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
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user