Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nevinhajs/nevinha-js
More than just framework... A component framework to make the web animations development easier
https://github.com/nevinhajs/nevinha-js
animation-components hacktoberfest hacktoberfest2018 nevinhajs web webcomponents
Last synced: about 1 month ago
JSON representation
More than just framework... A component framework to make the web animations development easier
- Host: GitHub
- URL: https://github.com/nevinhajs/nevinha-js
- Owner: NevinhaJS
- License: mit
- Created: 2018-07-03T20:58:03.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T19:13:35.000Z (almost 2 years ago)
- Last Synced: 2024-09-29T00:42:02.187Z (about 2 months ago)
- Topics: animation-components, hacktoberfest, hacktoberfest2018, nevinhajs, web, webcomponents
- Language: JavaScript
- Homepage:
- Size: 1020 KB
- Stars: 25
- Watchers: 3
- Forks: 8
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NevinhaJS
## What's NevinhaJS?
A component render as [React](https://reactjs.org/) 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](https://developers.google.com/web/updates/2018/03/cssom#customprops)**
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](http://all-animation.github.io)
> - Unit tests
> - Pre-commit tasks
> - ...
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [Contributing](#contributing)
- [Examples](https://github.com/NevinhaJS/nevinha-js-examples)
- [License](#license)
## Install
We'll put NevinhaJS in [NPM](https://www.npmjs.com/) as soon as possible.
## Usage
With a bundler like [rollup](https://rollupjs.org/) or [webpack](https://webpack.js.org/), use:
```javascript
// 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 (
Don't forget to declare this component, because it wasn't declared yet
// Yeah it has some effects inside our architecture,
// you just need to call the effect name 😉
Hello! This is the new: {name}
{name}
);
}
}
```
You can learn more about how to use NevinhaJs in the [NevinhaJs Examples repo](https://github.com/NevinhaJS/nevinha-js-examples)
**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](../../issues) or our [project roadmap](../..//projects/1), 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](../../issues).
If there is a [new question](../../issues/new), 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//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](LICENSE.md) © NevinhaJS