https://github.com/dimaslz/cross-ui-react

Wrapper of @cross-ui/core for react projects. Demo here: https://dimaslz.github.io/cross-ui-react
https://github.com/dimaslz/cross-ui-react

cross-ui react stenciljs web-components

Last synced: 5 days ago
JSON representation

Wrapper of @cross-ui/core for react projects. Demo here: https://dimaslz.github.io/cross-ui-react

• Host: GitHub
• URL: https://github.com/dimaslz/cross-ui-react
• Owner: dimaslz
• Created: 2021-06-15T01:10:42.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-06-20T11:29:10.000Z (over 3 years ago)
• Last Synced: 2024-11-04T01:42:20.411Z (about 2 months ago)
• Topics: cross-ui, react, stenciljs, web-components
• Language: JavaScript
• Homepage: https://dimaslz.github.io/cross-ui-react
• Size: 4.48 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @cross-ui/react

> Wrapper of @cross-ui/core for react projects

[![NPM](https://img.shields.io/npm/v/@cross-ui/react.svg)](https://www.npmjs.com/package/@cross-ui/react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

**RECOMMENDATION:** To use this library comfortably, is needed to install TailwindCSS and PostCSS, so, follow the next instructions.

**NOTE:** This is an ALPHA version, maybe the next improvements will have TailwindCSS as an option.

## Install

npm users: `npm install --save @cross-ui/react`

yarn users: `yarn add @cross-ui/react`

## Usage

```scss

//... your others css's

@import '~@cross-ui/core/dist/cross-ui/cross-ui.css';

//...

```

```jsx

import './index.scss'

import React from 'react'

import ReactDOM from 'react-dom'

import App from './App'

// import library setup

import { InitCrossUIReact } from '@cross-ui/react'

ReactDOM.render(, document.getElementById('root'))

// Execute the settings after render the application.

// This function will do the same like the official doc: https://stenciljs.com/docs/react

InitCrossUIReact();

```

now, in your `your-component.jsx`

```jsx

const YourComponent = () => {

  return 


    my button

  

}

```


you can see an example here: [`/playground/src/App.js`](/playground/src/App.js)

Check the [/playground](/playground) project to see an example.

## Docker

You have a [Dockerfile](Dockerfile) ready to server the example in a simple environment.

- build the image `docker build --no-cache -t cross-ui-react .`

- run the container `docker run --name cross-react-components -p 8080:80 -d cross-ui-react`

- open http://localhost:8080 in your browser.

## Author

```js

{

	license: "MIT",

	name: "Dimas López",

	role: "FullStack Software development",

	alias: "dimaslz",

	twitter: "https://twitter.com/dimaslz",

	site: "https://dimaslz.dev",

	linkedin: "https://www.linkedin.com/in/dimaslopezzurita"

}

```