@andideve/ids-react v0.1.15

@andideve/ids-react

andideve's personal design system.

Install

$ npm i @andideve/ids-react @emotion/react @emotion/styled

Usage

This will apply the theme provider and the Emotion cache provider.

// MyApp.jsx

import { Provider } from '@andideve/ids-react';

return (
  <Provider>
    <App />
  </Provider>
);

// styles/global.js

const global = (theme) => `
  // your styles
`;

export { global as globalStyles };
export default global;

JavaScript version

// MyApp.jsx

import { Provider } from '@andideve/ids-react';
import { Global } from '@emotion/react';
import { globalStyles } from './styles/global';

return (
  <Provider>
    <Global styles={(theme) => globalStyles(theme)} />
    <App />
  </Provider>
);

TypeScript version

// MyApp.tsx

import { Provider, Theme } from '@andideve/ids-react';

return (
  <Provider>
    <Global styles={(theme) => globalStyles(theme as Theme)} />
    <App />
  </Provider>
);

Example

import React from 'React';
import { Button } from '@andideve/ids-react';

function App() {
  return <Button>Push Me</Button>;
}