22

GitHub - uber/baseweb: A React Component library implementing the Base design la...

 4 years ago
source link: https://github.com/uber/baseweb
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f6461777238706f626e2f696d6167652f75706c6f61642f76313535363932303630342f626173652d7765622e737667

Base Web React Components

Build status

Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.

68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f6461777238706f626e2f696d6167652f75706c6f61642f76313536353831363536322f62617365626c61636b5f6f6f647663312e706e67

Usage

On npm, you can find Base Web as baseui.

Add baseui and its peer dependencies to your project:

# using yarn
yarn add baseui styletron-react styletron-engine-atomic

# using npm
npm install baseui styletron-react styletron-engine-atomic
import {Client as Styletron} from 'styletron-engine-atomic';
import {Provider as StyletronProvider} from 'styletron-react';
import {LightTheme, BaseProvider, styled} from 'baseui';
import {StatefulInput} from 'baseui/input';

const engine = new Styletron();

const Centered = styled('div', {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100%',
});

export default function Hello() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <Centered>
          <StatefulInput />
        </Centered>
      </BaseProvider>
    </StyletronProvider>
  );
}

Both Base Web and Styletron come with flow types and TypeScript. All our components are typed and examples have Vanilla, Flow and TypeScript versions. For Styletron + TS, you need to add some additional packages:

yarn add @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic

Example

An example of an application using Base Web can be found here. You can also check how it works on CodeSandbox.

Docs

To read the documentation, please visit baseweb.design.

Contributing

Contributing

Shoutouts 🙏

BrowserStack Logo

Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK