NevinhaJS

What's NevinhaJS?

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

🚨 Importants Notes

• NevinhaJS uses the virtual DOM as base of their diff.
• NevinhaJS uses CSS Typed OM API, which improves arround 30% the performance of your browser's css manipulations. You can learn more in this google article

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

Quickly create components for motion animation.

🤔 What's Missing?

• Web Animations API
• Parallax animations
• Include All Animations CSS3
• Unit tests
• Pre-commit tasks
• ...

Table of Contents

• Install
• Usage
• Contributing
• Examples
• License

Install

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

Usage

With a bundler like 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 learn more about how to use NevinhaJs in the NevinhaJs Examples repo

We're taking special care with browser animation performance. We're always following google developer's documentation and developers group to ensure performance compatibility

Contributing

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