New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

@purple/phoenix-components

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@purple/phoenix-components

Our aim is to build a simple React components library using styled components and typescript.


Version published
Weekly downloads
219
decreased by-58.76%
Maintainers
16
Weekly downloads
 
Created

Phoenix components

Our aim is to build a simple React components library using styled components and typescript.

3rd party libraries

Phoenix Components takes advantage of some 3rd party libraries and provides consistent styling for them.

  • react-select for the Selectbox component
  • react-window for the Selectbox component
  • react-dropzone for the FileUpload component
  • react-pdf for the FileUpload component
  • react-icons for the FileUpload, Input, SelectBox, and SelectPicker components
  • floating-label-react for the Input and TextArea components

Documentation

Phoenix components storybook

Install

npm i @purple/phoenix-components

Include Roboto font into repository Example:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700"
  rel="stylesheet"
/>

Import components

import { Input } from "@purple/phoenix-components"

Customization

To a certain degree, many of the components can be extended with styled-components. For example:

import styled from 'styled-components'
import { Input } from '@purple/phoenix-components'

const StyledInput = styled(Input)`
  // css overrides here
`

But in most cases, you probably just want to change the theme. This can be done by wrapping your app in a ThemeProvider component from the styled-components library.

https://styled-components.com/docs/advanced#theming

The theme must conform to a certain shape for this library to recognize the key names. Please refer to src/theme.tsx to see the shape. If you do not provide your own theme, this library will use the theme in src/theme.tsx.

FAQs

Package last updated on 23 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts