diff --git a/README.md b/README.md index 3ecf224..efa1189 100644 --- a/README.md +++ b/README.md @@ -28,17 +28,23 @@ The component is pretty simple at present (although I expect it will accumulate Content goes here ``` -There is one optional property, `velocity`, which sets the movement velocity (in CSS pixels per millisecond). It defaults to 0.12, which seems a reasonably sensible value for most applications. +## Properties -The component expects two CSS classes to be defined, but does not include any definitions itself (in order to allow for highest flexibility). These are: +### velocity -## `.Marquee` +Sets the movement velocity (in CSS pixels per millisecond). It defaults to 0.12, which seems a reasonably sensible value for most applications. -This sets styles on the container, i.e. the outer element whose position remains static. It should usually have `display: block` +### style + +This sets styles on the container, i.e. the outer element whose position remains static. It should usually have `display: block` (although as a `
` element is used this is the default) and for correct function must have `overflow-x: hidden`. -## `.MarqueeContent` +You can also style the container by targeting the class `.Marquee` instead of using this property. + +### contentStyle -This sets styles on the child that is moved within the container. In order to allow correct calculation of when the element is +This sets styles on the child that is moved within the container. In order to allow correct calculation of when the element is moved from the left hand edge of the display back to the right, it should usually be set up either with `display: block` and an explicit width, or with `display: inline-block` so that width can be calculated from its contents. + +You can also style the content by targeting the class `.MarqueeContent` instead of using this property. diff --git a/demo.html b/demo.html index 85f1cd1..6b0092d 100644 --- a/demo.html +++ b/demo.html @@ -25,6 +25,12 @@ return (
A marquee with default options. Dolor sit amet consectetuer adipiscing elit. + + A marquee with style and contentStyle properties set. Dolor sit amet consectetuer adipiscing elit. +
); } @@ -36,7 +42,7 @@ diff --git a/src/index.jsx b/src/index.jsx index 09515d0..5b9996f 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -64,11 +64,30 @@ export default class Marquee extends React.Component { return this.props.velocity ? this.props.velocity : 0.12; } + + getStyle () + { + return this.props.style ? this.props.style : null; + } + + getContentStyle () + { + const transform = { transform: this.calculateTransform() }; + const { contentStyle } = this.props; + + if (contentStyle) + return Object.assign({}, transform, contentStyle) + else + return transform + } + render () { return ( -
-
{this.props.children}
+
+
+ {this.props.children} +
); }