Skip to content

Commit

Permalink
feat(pie-lottie-player): DSW-2365 update MD with usage sample
Browse files Browse the repository at this point in the history
  • Loading branch information
fernandofranca committed Sep 4, 2024
1 parent 635fa04 commit 4e5c6d6
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions packages/components/pie-lottie-player/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,23 +72,23 @@ import { PieLottiePlayer } from '@justeattakeaway/pie-lottie-player/dist/react';

| Property | Type | Default | Description |
| ---------------- | --------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
| animationSrc | `String` | - | Lottie animation JSON file URL or relative path. animationSrc and animationData are mutually exclusive. |
| animationData | `Object` | - | Object with Lottie animation data. animationSrc and animationData are mutually exclusive. |
| loopDisabled | `Boolean` | false | By the default animations loop, setting this prop as true will prevent such behaviour. |
| autoPlayDisabled | `Boolean` | false | By default animations start playing as soon as its data is available, setting this prop as true will prevent such behaviour. |
| speed | `Number` | 1 | Determines the animation reproduction speed. 1 is the regular speed, 2 is twice as fast. |
| direction | `String` | forward | Sets the animation reproduction direction. |
| animationSrc | `String` | - | Lottie animation JSON file URL or relative path. animationSrc and animationData are mutually exclusive. |
| animationData | `Object` | - | Object with Lottie animation data. animationSrc and animationData are mutually exclusive. |
| loopDisabled | `Boolean` | false | By the default animations loop, setting this prop as true will prevent such behaviour. |
| autoPlayDisabled | `Boolean` | false | By default animations start playing as soon as its data is available, setting this prop as true will prevent such behaviour. |
| speed | `Number` | 1 | Determines the animation reproduction speed. 1 is the regular speed, 2 is twice as fast. |
| direction | `String` | forward | Sets the animation reproduction direction. |

In your markup or JSX, you can then use these to set the properties for the `pie-lottie-player` component:

```html
<!-- Native HTML -->
<pie-lottie-player></pie-lottie-player>
<pie-lottie-player animationSrc="./animation-file.json"></pie-lottie-player>

<!-- JSX -->
<PieLottiePlayer></PieLottiePlayer>
<PieLottiePlayer animationSrc="./animation-file.json"></PieLottiePlayer>
```

## Contributing

Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

0 comments on commit 4e5c6d6

Please sign in to comment.