Projects


NativeUI-web.js is lightweight easy to use library which enables native effects on web.

useState

Native-UI web


Native-UI web


What is Native-UI web?
This is a library I created to mimic some of the native android-like effects on the web. Yes, I know materialize already achieves this but I made this library before I discovered material design.
Currently, the only component available is a ripple like button.


How does it work?
Even though the code to use a native-ui button is extremely simple, there is actually a lot going on under the hood. Internally, native-ui retrieves all the elements with ripples class and replaces the innerHTML with a container and a canvas which listens for events and draws ripples whenever it is called.


Usage
Clone the github repository.
Open a terminal and run the following
Terminal

npm install 
npm run build
npm run browserify

Import the javascript bundle and the css.
index.html

<link rel="stylesheet" href="app.css"/>  
<script src="app.bundle.js"></script>
  
<a href="{% url 'projects:index' %}" class="native-btn native-btn-primary ripples">
Button
</a>

And that's it! Easy to use Native-UI effects on web.


Mohammad Arafat Zaman © 2024


All rights reserved