@jludev/component-lib-typescript

A React Component Library With TypeScript

Install

npm install --save @jludev/component-lib-typescript

Documentation

This library is created using styled-components so you will need to pull in styled-components as a dependency to use this library.

Review Styled-Components Docs(https://styled-components.com/)

How to pull in off of npm

npm install --save styled-components

Example of how simple it is to implement a component from this library.

import React, { Component } from 'react'
import MyComponent from '@jludev/component-lib-typescript'

const Example => () {

    return(
      <div>
        <MyComponent />
      <div>
    );

}

Avaiable Components

Here is a list of avaible componets included in the package.

Basic Elements

Form Elements

Buttons:

• PrimaryButton
• SecondaryButton
• TiriaryButton

Inputs:

• Input (Props it takes are {label, type, value, event})

Select:

• Dropdown //Props{label, options[], event(This goes to an onChange & onBlur event)}

Utility Styles

I have used these utility styles to help with quickly building style components. Here they are if you would like to use them.

example of using utility styles:

import UtilityStyles from '@jludev/component-lib-typescript'

const FormContainer = styled(FormDiv)`
  background-color: '#fff';
  padding: 1.25rem;
  border-radius: ${UtilityStyles.borderRadius.md};
  box-shadow: ${UtilityStyles.boxShadow.xxl};

  @media ${screenSize.md} {
    padding: 0.5rem;
  }
`

Border Radius

UtilityStyles.borderRadius.

Key: Value: none: '0',

sm: '0.125rem',

base: '0.25rem',

md: '0.375rem',

lg: '0.5rem',

full: '9999px'

Box Shadow

UtilityStyles.boxShadow.

  Key:   Value:
  sm: ' 0 1px 2px 0 rgba(0, 0, 0, 0.05)',

  base: ' 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',

  md: ' 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',

  lg:' 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',

  xl:'0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',

  xxl: ' 0 25px 50px -12px rgba(0, 0, 0, 0.25)',

  outline: ' 0 0 0 3px rgba(66, 153, 225, 0.5)'

Continer Size

UtilityStyles.screenSize.

Key:  Value:
 sm: '(min-width: 640px)',

 md: '(min-width: 768px)',

 lg: '(min-width: 1024px)',

 xl: '(min-width: 1280px)'

Customize Styles

This library is created using styled-components so the best way to customize each componet to fit your project needs is to pass a theme object to your theme provider.

Example of how to pass your custom theme to your whole app.

import React, { Component } from 'react'
import { ThemeProvider } from 'styled-components'
import MyComponent from '@jludev/component-lib-typescript'

// Your Theme Object
const theme = {
  primaryColor: red;
}

const Example => () {

    return(
      <ThemeProvider theme={theme}>
        <div>
          <MyComponent />
        <div>
      </ThemeProvider>
    );

}

ThemeFile Keys

For now these are the only aspects of components that can be customized.

  const theme = {
  primaryColor: //color
  secondaryColor: //color
  tiriaryColor: //color

  }

License

MIT © Joshua-Lucas