diff --git a/README.md b/README.md index 95b4099..06a4854 100644 --- a/README.md +++ b/README.md @@ -41,5 +41,6 @@ Optional. Configuration object to control the characteristics of the confetti: - `stagger` - Delay for each fetti in milliseconds, defaults to 0. - `random` - Randomization function, defaults to Math.random - `colors` - An array of color codes, defaults to `['#a864fd', '#29cdff', '#78ff44', '#ff718d' '#fdff6a']` +- `image` - Replace colors with an image instead (absolute or relative url). License MIT, copyright [Daniel Lundin](https://www.twitter.com/daniel-lundin) 2017 diff --git a/demo-src/app.js b/demo-src/app.js index 4f7f4c2..3b18e50 100644 --- a/demo-src/app.js +++ b/demo-src/app.js @@ -25,6 +25,11 @@ const colorPresets = [ ["#f00", "#0f0", "#00f"] ]; +const imagePresets = [ + "./btc.svg", + "./cash.svg" +]; + export default class App extends Component { constructor(props) { super(props); @@ -41,7 +46,8 @@ export default class App extends Component { }), {} ), - colorPreset: 0 + colorPreset: 0, + imagePreset: "" }; } @@ -81,12 +87,28 @@ export default class App extends Component { } render() { - const { settings, colorPreset, isLoading } = this.state; + const { settings, colorPreset, imagePreset, isLoading } = this.state; const colors = settings["colors"]; const allSettings = Object.assign({}, settings, { - colors: colorPresets[colorPreset] + colors: colorPresets[colorPreset], + image: (imagePreset !== "" && imagePresets[imagePreset]) || "" }); const settingSliders = this.renderSettingSliders(); + const imageStyle = { + label: { + "display": "flex", + "align-items": "center" + }, + radio: { + "margin-bottom": 0 + }, + img: { + "width": settings.width, + "height": settings.height, + "margin-left": "8px", + "margin-right": "8px" + } + }; return (
@@ -99,8 +121,8 @@ export default class App extends Component { this.setState({ colorPreset: 0 })} + checked={imagePreset === "" && colorPreset === 0} + onChange={() => this.setState({ colorPreset: 0, imagePreset: "" })} /> Celebration @@ -108,8 +130,8 @@ export default class App extends Component { this.setState({ colorPreset: 1 })} + checked={imagePreset === "" && colorPreset === 1} + onChange={() => this.setState({ colorPreset: 1, imagePreset: "" })} /> Monochrome @@ -117,8 +139,8 @@ export default class App extends Component { this.setState({ colorPreset: 2 })} + checked={imagePreset === "" && colorPreset === 2} + onChange={() => this.setState({ colorPreset: 2, imagePreset: "" })} /> Poker @@ -126,11 +148,32 @@ export default class App extends Component { this.setState({ colorPreset: 3 })} + checked={imagePreset === "" && colorPreset === 3} + onChange={() => this.setState({ colorPreset: 3, imagePreset: "" })} /> RGB + Image presets + +
diff --git a/demo/btc.svg b/demo/btc.svg new file mode 100644 index 0000000..9bcb725 --- /dev/null +++ b/demo/btc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/demo/cash.svg b/demo/cash.svg new file mode 100644 index 0000000..9772ab0 --- /dev/null +++ b/demo/cash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.d.ts b/index.d.ts index 874a2c0..52fb219 100644 --- a/index.d.ts +++ b/index.d.ts @@ -12,6 +12,7 @@ interface ConfettiConfig { elementCount?: number; decay?: number; colors?: string[]; + image?: string; random?: () => number; }