https://github.com/bonarja/react-sdom

Simplify the task of manipulating the DOM of the react components and use animations (like jQuery)
https://github.com/bonarja/react-sdom

animatecss animated dom frontend handling react ui

Last synced: 17 days ago
JSON representation

Simplify the task of manipulating the DOM of the react components and use animations (like jQuery)

• Host: GitHub
• URL: https://github.com/bonarja/react-sdom
• Owner: bonarja
• License: other
• Created: 2019-06-12T21:52:50.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-07-06T07:26:57.000Z (over 5 years ago)
• Last Synced: 2024-11-17T23:09:36.609Z (3 months ago)
• Topics: animatecss, animated, dom, frontend, handling, react, ui
• Language: JavaScript
• Homepage: https://bonarja.github.io/sdom/#/React
• Size: 17.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# react-sdom [![GitHub license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/bonarja/react-sdom/blob/master/LICENSE) [![NPM version](https://img.shields.io/npm/v/react-sdom.svg)](https://www.npmjs.com/package/react-sdom)

react-sdom is an extension to access the React DOM using references, it returns a ref object with the extra functions of sdom, simplifying the task of manipulating the html DOM and are similar to the most common functions of the old jQuery, all this in a simpler and lighter script summarizing only the essential and more useful.

react-sdom Includes functions to animate the DOM using animate.css as a promise and ajax request.




## check the complete documentation in the following link

## [https://bonarja.github.io/sdom/#/React](https://bonarja.github.io/sdom/#/React)

```javascript

import React from "react";

import { Sdom } from "react-sdom";

class Home extends React.Component {

    title = Sdom(); // get Sdom ref h1

    componentDidMount() {

        // use Sdom ref

        this.title

            .css({

                color: "coral",

                textTransform: "uppercase"

            })

            .in("bounceIn", 700)

            .then(() => {

                console.log("finished animation");

            });

    }

    render() {

        return (

            


                
hello

            

        );

    }

}

export default Home;

```