@jludev/component-lib-typescript v1.1.0
@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