mirror of
https://github.com/bendtherules/react-vis-gridarea.git
synced 2026-08-18 13:51:59 +00:00
Add basic readme
This commit is contained in:
@@ -1,34 +1,38 @@
|
|||||||
[](https://travis-ci.org/{{github-user-name}}/{{github-app-name}}.svg?branch=master)
|
# react-vis-gridarea
|
||||||
[](https://coveralls.io/github/{{github-user-name}}/{{github-app-name}}?branch=master)
|
|
||||||
[](http://opensource.org/licenses/MIT)
|
|
||||||
|
|
||||||
# Using this module in other modules
|
## Grid area for react-vis charts
|
||||||
|
|
||||||
Here is a quick example of how this module can be used in other modules. The [TypeScript Module Resolution Logic](https://www.typescriptlang.org/docs/handbook/module-resolution.html) makes it quite easy. The file `src/index.ts` is a [barrel](https://basarat.gitbooks.io/typescript/content/docs/tips/barrel.html) that re-exports selected exports from other files. The _package.json_ file contains `main` attribute that points to the generated `lib/index.js` file and `typings` attribute that points to the generated `lib/index.d.ts` file.
|
Usage
|
||||||
|
-----
|
||||||
|
```
|
||||||
|
import GridArea from 'react-vis-gridarea';
|
||||||
|
|
||||||
> If you are planning to have code in multiple files (which is quite natural for a NodeJS module) that users can import, make sure you update `src/index.ts` file appropriately.
|
|
||||||
|
|
||||||
Now assuming you have published this amazing module to _npm_ with the name `my-amazing-lib`, and installed it in the module in which you need it -
|
class TestChart extends React.Component {
|
||||||
|
render() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<XYPlot
|
||||||
|
width={...}
|
||||||
|
height={...}>
|
||||||
|
|
||||||
- To use the `Greeter` class in a TypeScript file -
|
// vvvvvv
|
||||||
|
|
||||||
```ts
|
<GridArea
|
||||||
import { Greeter } from "my-amazing-lib";
|
direction={'horizontal'}
|
||||||
|
highlightRegion={[[4, 6], [8, 11.25]]}
|
||||||
|
/>
|
||||||
|
|
||||||
const greeter = new Greeter("World!");
|
// ^^^^^^
|
||||||
greeter.greet();
|
|
||||||
|
<XAxis title="X Axis" />
|
||||||
|
<YAxis title="Y Axis" />
|
||||||
|
<LineSeries
|
||||||
|
data={...}/>
|
||||||
|
</XYPlot>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
- To use the `Greeter` class in a JavaScript file -
|
Looks like this:
|
||||||
|
|
||||||
```js
|
|
||||||
const Greeter = require('my-amazing-lib').Greeter;
|
|
||||||
|
|
||||||
const greeter = new Greeter('World!');
|
|
||||||
greeter.greet();
|
|
||||||
```
|
|
||||||
|
|
||||||
## Setting travis and coveralls badges
|
|
||||||
1. Sign in to [travis](https://travis-ci.org/) and activate the build for your project.
|
|
||||||
2. Sign in to [coveralls](https://coveralls.io/) and activate the build for your project.
|
|
||||||
3. Replace {{github-user-name}}/{{github-app-name}} with your repo details like: "ospatil/generator-node-typescript".
|
|
||||||
|
|||||||
Reference in New Issue
Block a user