astro-in-react
astro-in-react
npm i astro-in-react
astro-in-react

astro-in-react

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.

by RocketCommunicationsInc

6.0.5 (see all)TypeScript:Built-In
npm i astro-in-react
Readme

Installation

npm i @astrouxds/react

Import and Usage

First, import the css into either your index.js, app.js, or any CSS file you would like.

import '@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css'

Next, Import any desired Astro components the same way you would any other React component.

import { RuxProgress } from '@astrouxds/react

You can now use astro-components as regular React components.

import React from 'react';

const MyComp = () => {
    return (
        <div>
            <RuxProgress />
        </div>
    )
}

export default MyComp;

Astro Stencil Components Docs

Docs for all components can be found at our Astro Stencil Storybook, and in our web-components package

Known Issues

  • CSS custom properties for our react-wrapped components are undefined out of the box, thus the necessity for the CSS import.
  • For using checkbox, push button, or switch onRuxchange events, you need to check for the checked prop:
            <RuxSwitch
          value="switch"
          onRuxchange={(e: React.ChangeEvent<HTMLRuxSwitchElement>) =>
            setSwitchVal(e.target.checked ? e.target.value : "")
          }
        />
    

Downloads/wk

9

GitHub Stars

35

LAST COMMIT

9mos ago

MAINTAINERS

1

CONTRIBUTORS

24

OPEN ISSUES

5

OPEN PRs

8
VersionTagPublished
6.0.5
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate