how to use it in react protect,can you give an example?

[objectivehtml]

Need to write a Vue and React plugin. I have experience with Vue and Angular, but not too familiar with React framework specifics. The concepts are all the same. Vue could be wrapped a component or directive. Angular directive and just instantiate on the el. I would expect the same thing for react components too.

In the js-es6 branch, you will see the new version of the library that will replace the current. It has no dependencies and pure JS, so it should drop into React/Vue/Angular without any issues.

[brianespinosa]

I would expect the same thing for react components too.

Yes, you would basically need to wrap the functionality in your own component. As long as you are not trying to reach inside and modify the rendered markup in the DOM with React, you should be fine.

@objectivehtml once the new branch comes out we can probably look into making and exporting components for each of those three frameworks as part of the library.

[objectivehtml]

@brianespinosa I just pushed a huge commit of code comments, and now integrated jsdocs into the build system. Closer to v1 with this newest commit. I need to finish up the jsdocs and figure out how to skin it and make it better. Docs will now be entirely maintained in the code repo and build themselves whenever a the /dist bundles change.

[brianespinosa]

Sorry... just now getting some eyes on this. I am trying to set aside a half day later this week to take a look at open source stuff. So I will put this on my itinerary.

[OrsoBruno96]

If someone still needs a minimal example, I can post it here:

Installation

I simply used npm

npm install --save flipclock

You have to serve the CSS if you want your clock to work. I copied the file dist/flipclock.css where I bundle my CSS

Code

import React, { Component } from 'react';
import FlipClock from 'flipclock';

interface IProps {
  id: string
}

export default class CountdownClock extends Component<IProps> {

  componentDidMount() {
    const el = document.querySelector('#' + this.props.id);
    const now = new Date();
    const end = new Date(now.getFullYear(), now.getMonth(),
      now.getDate(), now.getHours() + 2);
    const clock = new FlipClock(
      el, end, {
        face: 'HourCounter',
        countdown: true,
      });
  }

  render() {
    return (
      <div id={this.props.id} />
    );
  }
}

You should only be careful and give a unique id to your clock. You should also read issue #386 and maybe change HourCounter to DayCounter

[Dror-Bar]

@OrsoBruno96

"You have to serve the CSS if you want your clock to work. I copied the file dist/flipclock.css where I bundle my CSS"

That was the weirdest part for me, thanks for the hint. Why wouldn't it work out of the box? why do I have to copy the CSS into my project to begin with?

[OrsoBruno96]

@Dror-Bar

I'm not an expert in React. You can embed style in the components with the usual syntax

<MyComponent style={{ maxWidth: '200px' }} />

but if you use css and classes, for example

<MyComponent className="my-class" />

then you have to define the class somewhere, and the right place is a CSS. I do not know any way to include CSS inside a javascript (but I'm sure that someone has created a tool to do it), so you have to serve this CSS file.

[Dror-Bar]

@OrsoBruno96 sorry to bother you, but perhaps you could help me. Do you know how to change the clock face and time?

clock.setTime() no longer works.

For face, I tried clock.face = "[FACE]", which does change the face. But if I change the face to "TwentyFourHourClock" or "TwelveHourClock" I get an error - Cannot read property "getTime" of undefined.

Just wondering if you dealt if anything like this or have a pointer. Thanks.

[Dror-Bar]

I ended up "fixing" both issues by recreating the element every time the face or date changes. I don't know if this is ideal but I haven't found a better solution.