Skip to content

Commit b35914b

Browse files
danilowozdanilowoz
authored
Added classNames props (#38)
1 parent b18a517 commit b35914b

File tree

5 files changed

+78
-27
lines changed

5 files changed

+78
-27
lines changed

‎README.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
React component that uses SVG to create a collection of loaders which simulates the structure of the
66
content that will be loaded, similar to Facebook cards loaders. **Use the
77
[online tool](https://github.com/danilowoz/create-react-content-loader) to create your own custom
8-
loader**
8+
loader.**
99

1010
If you are looking for
1111
[React Native](https://github.com/virusvn/react-native-svg-animated-linear-gradient),
@@ -41,6 +41,9 @@ const MyLoader = () => {
4141

4242
**Or in custom mode:** [example](#custom-style)
4343

44+
Use the [create-react-content-loader](https://github.com/danilowoz/create-react-content-loader) for
45+
your custom loaders
46+
4447
```jsx
4548
// import the component
4649
import ContentLoader, { Rect, Circle } from 'react-content-loader'
@@ -63,11 +66,12 @@ const MyLoader = () => {
6366
| style | _Object_ | `null` | Ex: `{ marginTop: '50px' }` |
6467
| type | _String_ | `facebook` | Options: `facebook`, `instagram`, `list`, `bullet-list`, `code` |
6568
| speed | _Number_ | `2` | Animation speed |
66-
| width | _Number_ | `400` | Width component |
67-
| height | _Number_ | `130` | Height component |
69+
| width | _Number_ | `400` | **viewBox** width of SVG |
70+
| height | _Number_ | `130` | **viewBox** height of SVG |
6871
| primaryColor | _String_ | `#f3f3f3` | Background the SVG |
6972
| secondaryColor | _String_ | `#ecebeb` | Animation color |
7073
| preserveAspectRatio | _String_ | `xMidYMid meet` | Aspect ratio option of SVG |
74+
| className | _String_ | '' | Classname in the <svg /> |
7175

7276
**Custom element options:**
7377

@@ -76,8 +80,8 @@ const MyLoader = () => {
7680
| **Rect** | _Number_ | _Number_ | _Number_ | _Number_ | _Number_ |
7781
| **Circle** | _Number_ | _Number_ | _Number_ | – | – |
7882

79-
**Use the [create-react-content-loader](https://github.com/danilowoz/create-react-content-loader)
80-
for your custom loader**
83+
Use the [create-react-content-loader](https://github.com/danilowoz/create-react-content-loader) for
84+
your custom loaders
8185

8286
## Examples
8387

‎src/Wrap.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,10 @@ const Wrap = (props: WrapProps): React.Element<*> => {
1515
return (
1616
<svg
1717
viewBox={`0 0 ${props.width} ${props.height}`}
18-
width={props.width}
19-
height={props.height}
2018
version="1.1"
2119
style={props.style}
2220
preserveAspectRatio={props.preserveAspectRatio}
21+
className={props.className}
2322
>
2423
<rect
2524
style={{ fill: `url(#${idGradient})` }}
@@ -64,4 +63,4 @@ const Wrap = (props: WrapProps): React.Element<*> => {
6463
)
6564
}
6665

67-
export default Wrap
66+
export default Wrap

‎src/index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ export type Props = {
2020
height: number,
2121
primaryColor: string,
2222
secondaryColor: string,
23-
preserveAspectRatio:string,
23+
preserveAspectRatio: string,
24+
className: string,
2425
}
2526

2627
type State = {
@@ -32,6 +33,7 @@ type State = {
3233
primaryColor: string,
3334
secondaryColor: string,
3435
preserveAspectRatio: string,
36+
className: string,
3537
}
3638

3739
class ContentLoader extends React.Component<Props, State> {
@@ -43,6 +45,7 @@ class ContentLoader extends React.Component<Props, State> {
4345
primaryColor: '#f0f0f0',
4446
secondaryColor: '#e0e0e0',
4547
preserveAspectRatio: 'xMidYMid meet',
48+
className: '',
4649
}
4750

4851
constructor(props: Props) {
@@ -57,6 +60,7 @@ class ContentLoader extends React.Component<Props, State> {
5760
primaryColor: props.primaryColor,
5861
secondaryColor: props.secondaryColor,
5962
preserveAspectRatio: props.preserveAspectRatio,
63+
className: props.className,
6064
}
6165
}
6266

@@ -88,4 +92,4 @@ class ContentLoader extends React.Component<Props, State> {
8892
}
8993

9094
export default ContentLoader
91-
export { Rect, Circle }
95+
export { Rect, Circle }

‎stories/index.js‎

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,66 @@
1-
import React from 'react';
1+
import React from 'react'
22

3-
import { storiesOf } from '@storybook/react';
3+
import { storiesOf } from '@storybook/react'
44

5-
import ContentLoader from '../src/index';
6-
import {Rect, Circle} from '../src/index';
5+
import ContentLoader from '../src/index'
6+
import { Rect, Circle } from '../src/index'
77

88
let defaultStyle = {
9-
width: 400,
10-
marginLeft: 'auto',
11-
marginRight: 'auto'
9+
width: 400,
10+
marginLeft: 'auto',
11+
marginRight: 'auto',
1212
}
1313

14-
const Container = (props) => (<div style={defaultStyle}>{props.children}</div>)
14+
const Container = props => <div style={defaultStyle}>{props.children}</div>
1515

1616
const MyLoader = () => {
17-
return(
17+
return (
1818
<ContentLoader height={140} speed={1} primaryColor={'#333'} secondaryColor={'#999'}>
1919
<Circle x={195} y={30} radius={30} />
2020
<Rect x={50} y={80} height={10} radius={5} width={300} />
2121
<Rect x={75} y={100} height={10} radius={5} width={250} />
2222
</ContentLoader>
23-
)
23+
)
2424
}
2525

26-
2726
storiesOf('ContentLoader', module)
28-
.add('facebook style', () => <Container><ContentLoader /></Container>)
29-
.add('instagram style', () => <Container><ContentLoader type='instagram' /></Container>)
30-
.add('code style', () => <Container><ContentLoader type='code' /></Container>)
31-
.add('list style', () => <Container><ContentLoader type='list' /></Container>)
32-
.add('bullet list style', () => <Container><ContentLoader type='bullet-list' /></Container>)
33-
.add('custom style', () => <Container><MyLoader /></Container>)
27+
.add('facebook style', () => (
28+
<Container>
29+
<ContentLoader />
30+
</Container>
31+
))
32+
.add('instagram style', () => (
33+
<Container>
34+
<ContentLoader type="instagram" />
35+
</Container>
36+
))
37+
.add('code style', () => (
38+
<Container>
39+
<ContentLoader type="code" />
40+
</Container>
41+
))
42+
.add('list style', () => (
43+
<Container>
44+
<ContentLoader type="list" />
45+
</Container>
46+
))
47+
.add('bullet list style', () => (
48+
<Container>
49+
<ContentLoader type="bullet-list" />
50+
</Container>
51+
))
52+
.add('custom style', () => (
53+
<Container>
54+
<MyLoader />
55+
</Container>
56+
))
57+
.add('className', () => (
58+
<Container>
59+
<ContentLoader className="random-className" />
60+
</Container>
61+
))
62+
.add('width and height', () => (
63+
<Container>
64+
<ContentLoader width={400} height={150} />
65+
</Container>
66+
))

‎tests/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@ describe('<ContentLoader />:', () => {
7575
width={200}
7676
primaryColor="#000"
7777
secondaryColor="#fff"
78+
preserveAspectRatio="xMaxYMax"
79+
className="random-className"
80+
style={{ marginBottom: '10px' }}
7881
/>
7982
)
8083

@@ -97,5 +100,13 @@ describe('<ContentLoader />:', () => {
97100
it('`secondaryColor` is a string and used', () => {
98101
expect(wrapper.props().secondaryColor).to.string('#fff')
99102
})
103+
104+
it('`preserveAspectRatio` is a string and used', () => {
105+
expect(wrapper.props().preserveAspectRatio).to.string('xMaxYMax')
106+
})
107+
108+
it('`style` is a object and used', () => {
109+
expect(wrapper.props().style).to.deep.equal({ marginBottom: '10px' })
110+
})
100111
})
101112
})

0 commit comments

Comments
 (0)