@nacelle/react-components

A collection of atomic components for building Nacelle applications

Usage no npm install needed!

<script type="module">
  import nacelleReactComponents from 'https://cdn.skypack.dev/@nacelle/react-components';
</script>

README

@nacelle/react-hooks

React Components for building Nacelle apps

Install

With NPM

npm i @nacelle/react-components

With Yarn

yarn add @nacelle/react-components

Usage

import React, { FC } from 'react';
import { Button } from '@nacelle/react-components';

type Props = {};

const MyComponent: FC<Props> = () => (
  <div>
    <Button fullWidth>Click Here!</Button>
  </div>
);

export default MyComponent;

Styling

All components use Emotion's CSS object syntax, and can be passed a styles prop that can overwrite any of the pre-defined styles.

import React, { FC } from 'react';
import { Button } from '@nacelle/react-components';
import { CSSObject } from '@emotion/core';

type Props = {};

const customStyles: CSSObject = { backgroundColor: 'seafoamgreen' };

const MyComponent: FC<Props> = () => (
  <div>
    <Button styles={customStyles}>Click Here!</Button>
  </div>
);

export default MyComponent;

License

ISC © getnacelle