NevinhaJS

What's NevinhaJS?

NevinhaJS is a component render based in React but beyond of static methods and component lifecycles (including state and props), we also have methods for make some animations and improve the UX.

🚨 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

We aren't another framework and no, we don't do the same thing like react does. We are a component framework (like react) but our focus is to make the development of animations or transitions easier

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

Create components fast for motion animation.

🤔 What's Missing?

Web Animations API

Parallax animations

Include animations of All Animation CSS3

Unit tests

Pre-commit tasks

...

Install
Usage
Contribute
Examples
License

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.

🚨 Check issue open and closed.

Submitting pull requests

Make sure your pull requests are within scope and that you follow the project assumptions.

🚨 Submit your pull solipsies with tests if necessary.

Fork it!
Clone your fork: git clone https://github.com/<your-username>/NevinhaJS
Navigate to the newly cloned directory: cd NevinhaJS
Create a new branch for the new feature: git checkout -b new-feature
Install the tools necessary for development: yarn
Make your changes.
yarn run build to verify your change doesn't increase output size.
Commit your changes: git commit -am 'Add new feature'
Push to the branch: git push origin new-feature
Submit a pull request with full remarks documenting your changes.

fernandosouza/nevinha-js