Skip to content

Commit bf5d2e8

Browse files
committed
Update readme. Add notes about API stability and use import instead of require in example code
1 parent 8d9095f commit bf5d2e8

File tree

1 file changed

+25
-8
lines changed

1 file changed

+25
-8
lines changed

readme.md

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,21 @@ yarn add react-string-replace
1515

1616
## Usage
1717

18-
### Simple Example
18+
First, import the lib. Both `require` and `import` are supported.
1919

2020
```js
21+
import reactStringReplace from 'react-string-replace';
22+
// OR
2123
const reactStringReplace = require('react-string-replace')
24+
```
25+
26+
Examples will use `import` since it is more common in the React ecosystem.
27+
28+
### Simple Example
29+
30+
```js
31+
import reactStringReplace from 'react-string-replace';
32+
2233
reactStringReplace('whats your name', 'your', (match, i) => (
2334
<span>{match}</span>
2435
));
@@ -46,7 +57,7 @@ reactStringReplace('Apt 111, phone number 5555555555.', /(\d+)/g, (match, i) =>
4657
### Within a React component
4758

4859
```js
49-
const reactStringReplace = require('react-string-replace');
60+
import reactStringReplace from 'react-string-replace';
5061

5162
const HighlightNumbers = React.createClass({
5263
render() {
@@ -67,7 +78,7 @@ const HighlightNumbers = React.createClass({
6778
You can run multiple replacements on one string by calling the function multiple times on the returned result. For instance, if we want to match URLs, @-mentions and hashtags in a string we could do the following:
6879

6980
```js
70-
const reactStringReplace = require('react-string-replace')
81+
import reactStringReplace from 'react-string-replace';
7182

7283
const text = 'Hey @ian_sinn, check out this link https://github.com/iansinnott/ Hope to see you at #reactconf';
7384
let replacedText;
@@ -104,11 +115,11 @@ See the [`example/`](https://github.com/iansinnott/react-string-replace/tree/mas
104115

105116
## Why?
106117

107-
I wanted an easy way to do string replacement a la `String.prototype.replace` within React components **without** breaking React's built in string escaping functionality. This meant standard string replacement combined with `dangerouslySetInnerHTML` was out of the question.
118+
I wanted an easy way to do string replacement similar to `String.prototype.replace` within React components **without** breaking React's built in string escaping and XSS protection. This meant standard string replacement combined with `dangerouslySetInnerHTML` was out of the question.
108119

109120
## API
110121

111-
### reactStringReplace(string, match, func)
122+
### reactStringReplace(string, match, replacementFunction)
112123

113124
#### string
114125

@@ -132,17 +143,23 @@ Example: Replace all occurrences of `'hey'` with `<span>hey</span>`
132143
reactStringReplace('hey hey you', /(hey)/g, () => <span>hey</span>);
133144
```
134145

135-
#### func
146+
#### replacementFunction
136147

137148
Type: `function`
138149

139150
The replacer function to run each time `match` is found. This function will be passed the matching string and an `index` which can be used for adding keys to replacement components if necessary. Character `offset` identifies the position of match start in the provided text.
140151

141152
```js
142-
const func = (match, index, offset) => <span key={index}>{match}</span>;
143-
reactStringReplace('hey hey you', /(hey)/g, func);
153+
const replacementFunction = (match, index, offset) => <span key={index}>{match}</span>;
154+
reactStringReplace('hey hey you', /(hey)/g, replacementFunction);
144155
```
145156

157+
## API Stability
158+
159+
With v1.0.0 the API is considered stable and should be considered production ready. Pull requests are still welcome but there is currently no intent to make changes to this lib other than bug fixes (please submit an issue if you find something!).
160+
161+
For details on API tests see [the tests file](./test.js).
162+
146163
## License
147164

148165
MIT © [Ian Sinnott](https://github.com/iansinnott)

0 commit comments

Comments
 (0)