Skip to content

Commit 5e1261d

Browse files
zfletchzfletch
committed
update readme
1 parent 386cd57 commit 5e1261d

File tree

1 file changed

+159
-17
lines changed

1 file changed

+159
-17
lines changed

‎README.md‎

Lines changed: 159 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,172 @@
1-
# alignment-react
1+
# Alignment React
22

3-
> Alignment display engine for React
3+
React library for displaying alignments.
44

5-
[![NPM](https://img.shields.io/npm/v/alignment-react.svg)](https://www.npmjs.com/package/alignment-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
5+
Note that this library currently has an unstable API (version 0.x.x).
66

7-
## Install
7+
## Demo
88

9-
```bash
10-
npm install --save alignment-react
9+
[https://perseids-tools.github.io/alignment-react/](https://perseids-tools.github.io/alignment-react/)
10+
11+
## Installation
12+
13+
`yarn add alignment-react`
14+
15+
Note that this package has the following peer dependencies:
16+
17+
```json
18+
{
19+
"react": "^16.0.0 || ^17.0.0"
20+
}
1121
```
1222

13-
## Usage
23+
(See project on [npm](https://www.npmjs.com/package/alignment-react).)
24+
25+
## How to use
26+
27+
### Demo
28+
29+
See the demo [App.js](/src/demo/App/App.js).
30+
31+
### Example
1432

1533
```jsx
16-
import React, { Component } from 'react'
34+
import {
35+
Alignment,
36+
Collapse,
37+
Sentence,
38+
Segment,
39+
Xml,
40+
} from 'alignment-react';
1741

18-
import MyComponent from 'alignment-react'
19-
import 'alignment-react/dist/index.css'
42+
import 'alignment-react/dist/index.css';
2043

21-
class Example extends Component {
22-
render() {
23-
return <MyComponent />
24-
}
25-
}
44+
const xml = `
45+
<aligned-text xmlns="http://alpheios.net/namespaces/aligned-text">
46+
<language lnum="L1" xml:lang="eng"/>
47+
<language lnum="L2" xml:lang="fra"/>
48+
<sentence n="1">
49+
<wds lnum="L1">
50+
<comment class="uri"/>
51+
<w n="1-1">
52+
<text>Hello</text>
53+
<refs nrefs="1-1"/>
54+
</w>
55+
<w n="1-2">
56+
<text>world</text>
57+
<refs nrefs="1-2 1-3"/>
58+
</w>
59+
</wds>
60+
<wds lnum="L2">
61+
<comment class="uri"/>
62+
<w n="1-1">
63+
<text>Bonjour</text>
64+
<refs nrefs="1-1"/>
65+
</w>
66+
<w n="1-2">
67+
<text>le</text>
68+
<refs nrefs="1-2"/>
69+
</w>
70+
<w n="1-3">
71+
<text>monde</text>
72+
<refs nrefs="1-2"/>
73+
</w>
74+
</wds>
75+
</sentence>
76+
</aligned-text>
77+
`;
78+
79+
80+
const App = () => (
81+
<Alignment alignment={xml}>
82+
<Sentence n="1">
83+
<Segment lnum="L1" />
84+
<Segment lnum="L2" />
85+
<Collapse title="XML">
86+
<Xml />
87+
</Collapse>
88+
</Sentence>
89+
</Alignment>
90+
);
91+
92+
export default App;
2693
```
2794

28-
## License
95+
#### Alignment
96+
97+
The `<Alignment>` component accepts alignment XML as an `alignment` prop.
98+
The other components should be children (or grandchildren, etc.) of the `<Alignment>` component.
99+
100+
#### Sentence
101+
102+
The `<Sentence>` component accepts a string `n` which represents the `n` of the
103+
sentence to display.
104+
105+
#### Segment
106+
107+
The `<Segment>` component shows the text of one of the languages. It takes an `lnum` prop for
108+
the `lnum` of the language to display.
109+
110+
#### Xml
111+
112+
The `<Xml>` component displays the XML of the sentence.
113+
114+
#### Collapse
115+
116+
The `<Collapse>` component is provided for convenience.
117+
It is a button that displays or hides its children whenever it is clicked.
118+
119+
## Development
120+
121+
### Setup
122+
123+
```
124+
git clone git@github.com:perseids-tools/alignment-react.git
125+
```
126+
127+
then install development dependencies
128+
129+
```
130+
yarn install
131+
```
132+
133+
### Running tests
134+
135+
#### Unit tests
136+
137+
`yarn test`
138+
139+
### Running demo application
140+
141+
#### In one terminal window
142+
143+
`yarn start`
144+
145+
#### In another
146+
147+
```
148+
cd example
149+
yarn start
150+
```
151+
152+
### Deploying demo application
153+
154+
`yarn deploy`
155+
156+
### Building
157+
158+
`yarn build`
159+
160+
### Publishing
161+
162+
```
163+
yarn build
164+
npm publish
165+
```
166+
167+
(Make sure to update the `version` in `package.json` before publishing a new release.)
168+
169+
## Upgrading Notes
29170

30-
MIT © [zfletch](https://github.com/zfletch)
171+
This library was created using [create-react-library](https://www.npmjs.com/package/create-react-library) version 3.1.1.
172+
See the documentation there for information about upgrading the underlying dependencies.

0 commit comments

Comments
 (0)