Nevinha-js NPM

NevinhaJS

What's NevinhaJS?

A component render as React that goes beyond of static methods and component lifecycles, including state, props, improving the way you make meaningful animations and providing an amazing experience.

🚨 Importants Notes
NevinhaJS uses the virtual DOM as base of their diff.
NevinhaJS uses CSS Typed OM API, wich improves arround 30% of the performance of your browser css manipulations. You can see more details in this google article

Actually we're implementing new features and animations to make this framework more powerful and sexy for using it in your projects.

🤔 What's Missing?
Web Animations API
Parallax animations
Include animations of All Animation CSS3
Unit tests
Pre-commit tasks
...

Install

We'll put NevinhaJS in NPM as son as possible.

Usage

With a bundler module as a rollup or webpack, use:

// using ES6 modules
import {NevinhaComponent, render} from 'nevinha-js';

class App extends NevinhaComponent {
  constructor(){
    super();
    this.state.name = "NevinhaJS"
  }

  customEvent(){
    console.log('this is a custom event')
  }

  render() {
    const {name} = this.state;
    const {customEvent} = this.props;

    return (
      <div>
          <SomeNevinhaComponent />

          <AnotherComponent>
            <p>Don't forget to declare this component, because it wasn't declared yet</p>
          </AnotherComponent>

          // Yeah it has some effects inside our architecture,
          // you just need to call the effect name  😉
          <h1 fadeIn>
            <p>Hello! This is the new: {name}</p>
            {name}
          </h1>

          <AnotherComponentWithProps myEvent={customEvent} myProp="anything" />
      </div>
    );
  }
}

You can see more details of how to use NevinhaJs in the Nevinha Js Examples repo

We are taking care with the browser animations performance and we are allways following the google developers documentation and developers group to ensure our performance compatibility

Contribute

First of all, thank you for your contribution. If you want to contribute, feel free to search for open issues or our project roadmap, we have a lot of work to do, and of course we'll need you.

Reporting Issues

Did you find a problem? Do you want a new feature? First check if your problem or idea has been reported. If there is a new question, please be clear and descriptive.