Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Asana/typed-react
A binding layer between React and TypeScript
https://github.com/Asana/typed-react
Last synced: 8 days ago
JSON representation
A binding layer between React and TypeScript
- Host: GitHub
- URL: https://github.com/Asana/typed-react
- Owner: Asana
- License: mit
- Archived: true
- Created: 2014-09-24T18:37:42.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-04-07T08:31:36.000Z (over 1 year ago)
- Last Synced: 2024-09-19T01:25:53.710Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 129 KB
- Stars: 373
- Watchers: 24
- Forks: 19
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Typed React
[![NPM Version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Coverage][coveralls-image]][coveralls-url]
A binding layer between React and TypeScript for the `React.createClass` syntax. With React 0.13, you can use ES6 classes to inherit from React components. This works well with TypeScript and you can just use the [type definitions][type-definitions] in DefinitelyTyped. The inheritance path has some different functionality so you may still want to use the `React.createClass` pattern. TypedReact can help you implement that pattern by providing a dummy parent class and a set of functions to appropriately extract the prototype for `React.createClass`
## Installation
```sh
npm install typed-react --save
```
## Example
```ts
///
///
import React = require("react");
import TypedReact = require("typed-react");
export interface TimerProps {
tickInterval: number;
}
interface TimerState {
ticksElapsed: number;
}
class Timer extends TypedReact.Component {
private interval: number;
getInitialState() {
return {
ticksElapsed: 0
};
}
tick() {
this.setState({
ticksElapsed: this.state.ticksElapsed + 1
});
}
componentDidMount() {
this.interval = setInterval(this.tick, this.props.tickInterval);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return React.DOM.div(null, "Ticks Elapsed: ", this.state.ticksElapsed);
}
}
export var timer = TypedReact.createClass(Timer);
```
In this case we export the Props and the Factory but we could make the props and state inline interfaces and just export the factory function.
## Mixins
TypedReact supports using existing React Mixins as well as defining new mixins with idiomatic TypeScript. The example is based on [http://www.typescriptlang.org/Handbook#mixins](http://www.typescriptlang.org/Handbook#mixins). You need to use `createMixin` on your own mixins and should export that from your mixin modules.
```ts
///
///
import React = require("react/addons");
import TypedReact = require("typed-react");
export interface GreeterProps {
name: string;
}
class GreetingMixin extends TypedReact.Mixin {
greet(greeting: string): React.ReactHTMLElement {
return React.DOM.h1(null, greeting, this.props.name);
}
}
class Greeter extends TypedReact.Component implements GreetingMixin {
greet: (greeting: string) => React.ReactHTMLElement;
render() {
return this.greet(this.greeting);
}
}
export var greeter = TypedReact.createClass(Greeter, [
TypedReact.createMixin(GreetingMixin),
React.addons.PureRenderMixin
]);
```
## Changelog
- **3.3** Updating the React type definitions and moving the location of the type definition
- **3.2** Update with new `react.d.ts` typings
- **3.1** `extractPrototype` is now `createMixin`
- **3.0** Idiomatic Mixin Support
- **2.2** Making React a peer dependency. This means you do not need to pass `React.createClass` into `createClass`.
- **2.1** Switching to createClass
- **2.0** React 0.12.RC
- **1.4** Removed incorrect mixin support
- **1.3** Mixins
## Development Setup
```sh
git clone [email protected]:Asana/typed-react.git
cd typed-react
npm install
npm run typings
npm test
```
[npm-url]: https://www.npmjs.org/package/typed-react
[npm-image]: http://img.shields.io/npm/v/typed-react.svg?style=flat-square
[travis-url]: http://travis-ci.org/Asana/typed-react
[travis-image]: http://img.shields.io/travis/Asana/typed-react/master.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/Asana/typed-react
[coveralls-image]: https://img.shields.io/coveralls/Asana/typed-react/master.svg?style=flat-square
[type-definitions]: https://github.com/borisyankov/DefinitelyTyped/tree/master/react