xf-material-components

Atomic UI components for Xalgorithms Foundation projects

Usage no npm install needed!

<script type="module">
  import xfMaterialComponents from 'https://cdn.skypack.dev/xf-material-components';
</script>

README

UI Components for the Xalgorithms Foundation

$ yarn add xf-material-components

published on npm

Use with React

These components are ready to go out of the box for applications using react. In the root app.jsx file, import the global style and add the component within the render as follows.

// App.js

import { Button, InputText, InputDate } from 'xf-material-components'
import GlobalStyle from 'xf-material-components/config/global.styles'

function App() {
  return (
    <div className="App">
      <GlobalStyle />
      <header className="App-header">
        <Button>Test</Button>
        <InputText />
        <InputDate />
      </header>
    </div>
  );
}

export default App;

Use with Next.js

For react next.js projects, import the rootStyle.css into your index.js file.

// index.js

import 'xf-material-components/config/rootStyle.css'