Bycoders-ui-react NPM

This is bycoders_ oficial React Ui-Kit library.

Usage

yarn add bycoders-ui-react

You'll need to wrap your application with a context to use this library:

React:

// src/index.js

import { ThemeProvider, defaultTheme, ResetCSS } from 'bycoders-ui-react'

function MyApp() {
  return(
    <ThemeProvider theme={defaultTheme}>
      <ResetCSS />
      <Router />
      <OtherComponents />
    </ThemeProvider>
  )
}

export default MyApp

// src/pages/_app.js

import { ThemeProvider, defaultTheme } from 'bycoders-ui-react'

function MyApp({ Component, pageProps }) {
  return(
    <ThemeProvider theme={defaultTheme}>
      <ResetCSS />
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

you should import Google's Inter font, which is the default font, in your <head/> tag:

<head>
  ...
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
  ...
</head>

then you can use components like this:

// src/pages/foo.tsx

import React from 'react';
import { Input } from 'bycoders-ui-react';

export default function Foo() {
  return (
    <Input label="Your Label" error="Foo"/>
  );
}

Customize Theme

You can customize theme colors and add properties:

Adding new colors/properties:

import { defaultTheme } from 'bycoders-ui-react';

const newTheme = {
  ...defaultTheme,
  foo: '#fff',
  baz: '#ABCDEF',
};

Customizing existing props:

You can use BycodersTheme interface to view all properties of the theme.

import { defaultTheme } from 'bycoders-ui-react';

const newTheme = {
  ...defaultTheme,
  textColor: '#F3F3F3',
};

Typescript

If you're using Typescript maybe you should connect theme with styled-components:

If you're using legacy theme:

// src/@types/styled-components.d.ts

import { BycodersTheme } from 'bycoders-ui-react';

declare module 'styled-components' {
  export interface DefaultTheme extends BycodersTheme {}
}

If you're using a custom theme:

// src/styles/newTheme.ts

import { defaultTheme } from 'bycoders-ui-react';

const newTheme = {
  ...defaultTheme,
  textColor: '#F3F3F3',
};

// src/@types/styled-components.d.ts

import { newTheme } from '../styles/newTheme';

type MyThemeType = typeof newTheme

declare module 'styled-components' {
  export interface DefaultTheme extends MyThemeType {}
}

Documentation

This project is documented on Storybook. You'll need to clone the project and execute storybook:

git clone git@github.com:ByCodersTec/ui-kit-react.git
yarn install
yarn storybook

Contribute

yarn install

To contribute, merge your desired PR to development and then:

git checkout development
git pull origin development
yarn bump-patch
git push origin development --follow-tags
git checkout master
git pull origin master
git merge development
git push origin master

react bycoders ui-kit

@types/react-image-crop @types/uuid clsx icomoon-react immer lodash react-dnd react-dnd-html5-backend react-image-crop react-pdf react-use styled-components suneditor suneditor-react uuid

@everything-registry/sub-chunk-1279 @infinitebrahmanuniverse/nolb-byc @zalastax/nolb-byc

3 years ago

3 years ago

4 years ago

4 years ago