Components

Installation

Install the library:

npm install @fxtrot/edge styled-components@5.x --save

Or via yarn:

yarn add @fxtrot/edge styled-components@5.x

Wrap your app in ThemeProvider which currently just injects global CSS-variables, but in case there will be some proper CSS-in-JS solution, it can actually do something:

import ReactDOM from 'react-dom';
import { Edge } from '@fxtrot/edge';
ReactDOM.render(
  <Edge>
    <App />
  </Edge>
);

Or for concurrent mode

import ReactDOM from 'react-dom';
import { Edge } from '@fxtrot/edge';
ReactDOM.createRoot(document.getElementById('root')).render(
  <Edge>
    <App />
  </Edge>
);

Usage

Components are fully typed with TypeScript, but you don't have to use TypeScript:

import React from 'react';
import { TextField } from '@fxtrot/edge';
const MyComponent = () => {
  const [text, setText] = React.useState('Hello world!');
  return (
    <main>
      <h1>{text}</h1>
      <TextField value={text} onChange={(e) => setText(e.target.value)} label="Welcome message" />
    </main>
  );
};