Skip to content

Commit

Permalink
Converting Import module to English
Browse files Browse the repository at this point in the history
Signed-off-by: Bala Raman <srbala@gmail.com>
  • Loading branch information
srbala authored and chenshuai2144 committed Aug 29, 2018
1 parent 649fdb3 commit 1303fac
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 3 deletions.
65 changes: 65 additions & 0 deletions docs/import.en-US.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
order: 8
title: Import Module
type: Introduction
---

In addition to the antd components and the built-in business components of the scaffold, sometimes we need to introduce other external modules. Here we introduce the rich text component [react-quill] (https://www.npmjs.com/package/react-quill) as an example.

---

## Introduce Dependencies

Enter the following command at the terminal to complete the installation:

```bash
$ npm install react-quill --save
```

> Adding the `--save` parameter automatically adds dependencies to package.json.
## Use

Directly paste the code:

```jsx
import React from 'react';
import { Button, notification, Card } from 'antd';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

export default class NewPage extends React.Component {
state = {
value: 'test',
};

handleChange = (value) => {
this.setState({
value,
})
};

prompt = () => {
notification.open({
message: 'We got value:',
description: <span dangerouslySetInnerHTML={{ __html: this.state.value }}></span>,
});
};

render() {
return (
<Card title="Rich text editor">
<ReactQuill value={this.state.value} onChange={this.handleChange} />
<Button style={{ marginTop: 16 }} onClick={this.prompt}>Prompt</Button>
</Card>
);
}
}
```

<img alt="Rich text" src="https://gw.alipayobjects.com/zos/rmsportal/rHQRmMxAbSOCsEFungwd.png" />

This successfully introduced a rich text component. There are several points worth noting:

- import requires attention to the data structure exposed by the component;
- Some components require additional styles, such as this one.
4 changes: 1 addition & 3 deletions docs/import.md → docs/import.zh-CN.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
---
order: 8
title:
en-US: Import Module
zh-CN: 引入外部模块
title: 引入外部模块
type: 入门
---

Expand Down

0 comments on commit 1303fac

Please sign in to comment.