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.

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
• ...

Table of Contents

• 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.

License

MIT License © NevinhaJS