Skip to content

Commit f9959b2

Browse files
authored
Add prop table to the README
1 parent d9c9610 commit f9959b2

File tree

1 file changed

+19
-5
lines changed

1 file changed

+19
-5
lines changed

README.md

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,33 @@ ReactDOM.render(
4444

4545
## Configuration
4646

47-
An optional `color`, `style`, and `snowflakeCount` property can be passed in to the component.
47+
Optional properties can be provided to customise the animation.
4848

4949
```jsx
5050
<Snowfall
51-
// Changes the snowflake color
52-
color="red"
53-
// Applied to the canvas element
51+
// The color of the snowflake, can be any valid CSS color.
52+
color="#fff"
53+
// Applied to the canvas element.
5454
style={{ background: '#fff' }}
55-
// Controls the number of snowflakes that are created (default 150)
55+
// Controls the number of snowflakes that are created (defaults to 150).
5656
snowflakeCount={200}
5757
/>
5858
```
5959

60+
All available properties are detailed below.
61+
62+
| Property | Description | Default |
63+
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
64+
| `changeFrequency` | The frequency in frames that the wind and speed values will update. | `200` |
65+
| `color` | The color of the snowflake, can be any valid CSS color. | `'#dee4fd'` |
66+
| `images` | An array of images that will be rendered as the snowflakes instead of the default circle shapes. | `undefined` |
67+
| `radius` | The minimum and maximum radius of the snowflake in pixels.<br/><br/>The value for each snowflake will be randomly selected within this range. | `[0.5, 3.0]` |
68+
| `rotationSpeed` | The minimum and maximum rotation speed of the snowflake (in degrees of rotation per frame).<br/><br/>The rotation speed determines how quickly the snowflake rotates when an image is being rendered.<br/><br/>The value for each snowflake will be randomly selected within this range. | `[-1.0, 1.0]` |
69+
| `snowflakeCount` | The number of snowflakes to be rendered. | `150` |
70+
| `speed` | The minimum and maximum speed of the snowflake (in pixels per frame).<br/><br/>The speed determines how quickly the snowflake moves along the y axis (vertical speed).<br/><br/>The value for each snowflake will be randomly selected within this range. | `[1.0, 3.0]` |
71+
| `style` | Any style properties that will be passed to the canvas element. | `undefined` |
72+
| `wind` | The minimum and maximum wind of the snowflake (in pixels per frame).<br/><br/>The wind determines how quickly the snowflake moves along the x axis (horizontal speed).<br/><br/>The value for each snowflake will be randomly selected within this range. | `[-0.5, 2.0]` |
73+
6074
## Using Images
6175

6276
Instead of rendering colored circles you can instead pass in an array of image elements

0 commit comments

Comments
 (0)