Skip to content

Added style and contentStyle property #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PaddyCo wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added style and contentStyle property #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb2a1b8
Added style and contentStyle property
PaddyCo Apr 29, 2018
8a31499
Removed invalid (and unused) property from div
PaddyCo Apr 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,23 @@ The component is pretty simple at present (although I expect it will accumulate
<Marquee>Content goes here </Marquee>
```

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 `<div>` 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.
8 changes: 7 additions & 1 deletion demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
return (
<div>
<Marquee>A marquee with default options. Dolor sit amet consectetuer adipiscing elit.</Marquee>
<Marquee
style={{ width: "256px", padding: 5, backgroundColor: "black" }}
contentStyle={{ color: "aqua", whiteSpace: "nowrap" }}
>
A marquee with style and contentStyle properties set. Dolor sit amet consectetuer adipiscing elit.
</Marquee>
</div>
);
}
Expand All @@ -36,7 +42,7 @@
</script>

<style type="text/css">
.Marquee { overflow-x: hidden; }
.Marquee { overflow-x: hidden; margin-bottom: 16px; }
.MarqueeContent { display: inline-block; }
</style>
<body onload="window.setTimeout(function () { startApp() },1000)">
Expand Down
23 changes: 21 additions & 2 deletions src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="Marquee" ref={this.setOuterRef}>
<div className="MarqueeContent" ref={this.setContentRef} style={{transform: this.calculateTransform()}}>{this.props.children}</div>
<div className="Marquee" ref={this.setOuterRef} style={this.getStyle()}>
<div className="MarqueeContent" ref={this.setContentRef} style={this.getContentStyle()}>
{this.props.children}
</div>
</div>
);
}
Expand Down