Skip to content

Commit 7fa68e0

Browse files
braposobraposo
authored
Merge pull request #18 from braposo/improvements-nov17
v2.0.0
2 parents 69680d0 + fbaade7 commit 7fa68e0

File tree

13 files changed

+4377
-2029
lines changed

13 files changed

+4377
-2029
lines changed

‎.babelrc

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,23 @@
11
{
22
"presets": [
3-
"es2015",
4-
"stage-0",
5-
"react"
6-
]
3+
[
4+
"@babel/env",
5+
{
6+
"loose": true,
7+
"modules": false
8+
}
9+
],
10+
"@babel/react"
11+
],
12+
"plugins": [
13+
"@babel/plugin-proposal-object-rest-spread",
14+
"@babel/plugin-proposal-class-properties"
15+
],
16+
"env": {
17+
"commonjs": {
18+
"plugins": [
19+
"@babel/plugin-transform-modules-commonjs"
20+
]
21+
}
22+
}
723
}

‎.eslintrc

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
{
22
"extends": "edited",
3+
"parserOptions": {
4+
"ecmaVersion": 6,
5+
"sourceType": "module",
6+
"ecmaFeatures": {
7+
"jsx": true
8+
}
9+
},
310
"settings": {
411
"import/resolver": {
512
"node": {
6-
"extensions": [ ".js", ".jsx" ],
13+
"extensions": [".js", ".jsx"]
714
}
815
}
916
},
1017
"rules": {
1118
"react/prefer-es6-class": [2, "always"],
19+
"arrow-parens": [2, "as-needed"]
1220
}
13-
}
21+
}

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,6 @@ node_modules
2121
# Optional REPL history
2222
.node_repl_history
2323

24-
dist/
24+
dist/
25+
es/
26+
lib/

‎.prettierrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 80,
3+
"tabWidth": 4,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": false,
7+
"trailingComma": "es5",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"fluid": false
11+
}

‎CONTRIBUTING.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ We are open to, and grateful for, any contributions made by the community.
44

55
## Reporting Issues
66

7-
Before opening an issue, please search the [issue tracker](https://github.com/EDITD/react-text-loop/issues) to make sure your issue hasn't already been reported.
7+
Before opening an issue, please search the [issue tracker](https://github.com/braposo/react-text-loop/issues) to make sure your issue hasn't already been reported.
88

99
## Development
1010

11-
Visit the [Issue tracker](https://github.com/EDITD/react-text-loop/issues) to find a list of open issues that need attention.
11+
Visit the [Issue tracker](https://github.com/braposo/react-text-loop/issues) to find a list of open issues that need attention.
1212

1313
Fork, then clone the repo:
1414
```
@@ -45,7 +45,7 @@ Please open an issue with a proposal for a new feature or refactoring before sta
4545

4646
## Submitting Changes
4747

48-
* Open a new issue in the [Issue tracker](https://github.com/EDITD/react-text-loop/issues).
48+
* Open a new issue in the [Issue tracker](https://github.com/braposo/react-text-loop/issues).
4949
* Fork the repo.
5050
* Create a new feature branch based off the `master` branch.
5151
* Make sure all tests pass and there are no linting errors.

‎README.md

Lines changed: 54 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,31 @@
11
## react-text-loop
2+
23
![text-loop2](https://cloud.githubusercontent.com/assets/38172/24254063/d5e9c38c-0fd9-11e7-9b75-46dc00421cd7.gif)
34

4-
An animated loop of text nodes for your headings. Uses [react-motion](https://github.com/chenglou/react-motion) for the transition so it handles super fast animations and spring params.
5+
An animated loop of text nodes for your headings. Uses
6+
[react-motion](https://github.com/chenglou/react-motion) for the transition so it handles super fast
7+
animations and spring params.
8+
9+
[![npm version][version-badge]][npm]
10+
[![npm downloads][downloads-badge]][npm]
11+
[![gzip size][size-badge]][size]
12+
[![MIT License][license-badge]][license]
13+
[![PRs Welcome][prs-badge]][prs]
514

615
---
716

817
## Installation
918

10-
`npm install react-text-loop` || `yarn add react-text-loop`
19+
`npm install react-text-loop` or `yarn add react-text-loop`
1120

1221
## How to use
1322

23+
[![Edit react-text-loop][codesandbox-badge]][codesandbox]
24+
1425
### Code
1526

1627
```jsx
17-
import TextLoop from 'react-text-loop';
28+
import TextLoop from "react-text-loop";
1829

1930
class App extends Component {
2031
render() {
@@ -24,28 +35,32 @@ class App extends Component {
2435
<span>First item</span>
2536
<Link to="/">Second item</Link>
2637
<BodyText>Third item</BodyText>
27-
</TextLoop> and something else.
38+
</TextLoop>{" "}
39+
and something else.
2840
</h2>
2941
);
30-
};
42+
}
3143
}
3244
```
3345

3446
### Props
3547

36-
| Prop | Type | Default | Definition |
37-
| --- | --- | --- | --- |
38-
| speed | number | `3000` | The speed that the words change (in ms). Set to 0 to stop animation. |
39-
| adjustingSpeed | number | `150` | The speed that the container around each word adjusts to the next one (in ms) |
40-
| fade | boolean | `true` | Enable or disable the fade animation on enter and leave |
41-
| mask | boolean | `false` | Mask the animation around the bounding box of the animated content |
42-
| springConfig | object | `{ stiffness: 340, damping: 30 }` | Configuration for [react-motion spring](https://github.com/chenglou/react-motion#--spring-val-number-config-springhelperconfig--opaqueconfig) |
43-
| style | object or array | | Any additional styles you might want to send to the wrapper. Uses glamor to process it so you can send either objects or arrays. |
44-
| children | node | | The words you want to loop (required) |
48+
| Prop | Type | Default | Definition |
49+
| -------------- | --------------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
50+
| interval | number \| array | `3000` | The frequency (in ms) that the words change. Can also pass an array if you want a different interval per children |
51+
| delay | number | `0` | A delay (in ms) for the animation to start. This allows to use multiple instances to create a staggered animation effect for example. |
52+
| adjustingSpeed | number | `150` | The speed that the container around each word adjusts to the next one (in ms). Usually you don't need to change this. |
53+
| fade | boolean | `true` | Enable or disable the fade animation on enter and leave |
54+
| mask | boolean | `false` | Mask the animation around the bounding box of the animated content |
55+
| noWrap | boolean | `true` | Disable `whitepace: nowrap` style for each element. This is used by default so we can always get the right width of the element but can have issues sometimes. |
56+
| springConfig | object | `{ stiffness: 340, damping: 30 }` | Configuration for [react-motion spring](https://github.com/chenglou/react-motion#--spring-val-number-config-springhelperconfig--opaqueconfig) |
57+
| className | string | | Any additional CSS classes you might want to use to style the image |
58+
| children | node | | The words you want to loop (required) |
4559

4660
### Caveats
4761

48-
Because `<TextLoop>` loops through its children nodes, only root-level nodes will be considered so doing something like:
62+
Because `<TextLoop>` loops through its children nodes, only root-level nodes will be considered so
63+
doing something like:
4964

5065
```jsx
5166
<TextLoop>
@@ -54,22 +69,16 @@ Because `<TextLoop>` loops through its children nodes, only root-level nodes wil
5469
<span>Second item</span>
5570
</div>
5671
<div>Third item</div>
57-
</TextLoop>
72+
</TextLoop>;
5873
```
5974

6075
will make first and second item to be treated as one and animate together.
6176

62-
You can also just send a normal array as children prop if you don't need any individual styling for each node.
77+
You can also just send a normal array as children prop if you don't need any individual styling for
78+
each node.
6379

6480
```jsx
65-
<TextLoop
66-
children={[
67-
"Trade faster",
68-
"Increase sales",
69-
"Stock winners",
70-
"Price perfectly"
71-
]}
72-
/>
81+
<TextLoop children={["Trade faster", "Increase sales", "Stock winners", "Price perfectly"]} />;
7382
```
7483

7584
## Examples
@@ -79,25 +88,37 @@ You can also just send a normal array as children prop if you don't need any ind
7988
![text-loop-fast-small](https://cloud.githubusercontent.com/assets/38172/24275301/5d48c6e2-1026-11e7-85b8-e7cfe07f4714.gif)
8089

8190
```jsx
82-
<TextLoop speed={100}>
83-
...
84-
</TextLoop>
91+
<TextLoop interval={100}>...</TextLoop>;
8592
```
8693

8794
### Wobbly animation
8895

8996
![text-loop-bouncy](https://cloud.githubusercontent.com/assets/38172/24275347/b0e45b2c-1026-11e7-8e04-04bdafdef249.gif)
9097

9198
```jsx
92-
<TextLoop springConfig={{ stiffness: 180, damping: 8 }}>
93-
...
94-
</TextLoop>
99+
<TextLoop springConfig={{ stiffness: 180, damping: 8 }}>...</TextLoop>;
95100
```
96101

102+
For many other examples, please have a look at the [CodeSandbox playground][codesandbox].
103+
97104
## Contributing
98105

99-
Please follow our [contributing guidelines](https://github.com/EDITD/react-text-loop/blob/master/CONTRIBUTING.md).
106+
Please follow our
107+
[contributing guidelines](https://github.com/braposo/react-text-loop/blob/master/CONTRIBUTING.md).
100108

101109
## License
102110

103-
[MIT](https://github.com/EDITD/react-text-loop/blob/master/LICENSE)
111+
[MIT](https://github.com/braposo/react-text-loop/blob/master/LICENSE)
112+
113+
[npm]: https://www.npmjs.com/package/react-text-loop
114+
[license]: https://github.com/braposo/react-text-loop/blob/master/LICENSE
115+
[prs]: http://makeapullrequest.com
116+
[size]: https://unpkg.com/react-text-loop/dist/react-text-loop.min.js
117+
[version-badge]: https://img.shields.io/npm/v/react-text-loop.svg?style=flat-square
118+
[downloads-badge]: https://img.shields.io/npm/dm/react-text-loop.svg?style=flat-square
119+
[license-badge]: https://img.shields.io/npm/l/react-text-loop.svg?style=flat-square
120+
[size-badge]: http://img.badgesize.io/https://unpkg.com/react-text-loop/dist/react-text-loop.min.js?compression=gzip&style=flat-square
121+
[modules-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square
122+
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
123+
[codesandbox-badge]: https://codesandbox.io/static/img/play-codesandbox.svg
124+
[codesandbox]: https://codesandbox.io/s/github/braposo/react-text-loop/

0 commit comments

Comments
 (0)