feather-react-components

My most used components 💃🏼📦

Install

npm i feather-react-components

Components

• Card
• Text
• Container
• Spacer
• Avatar
• Button
• imagecontainer

Card

Go to components

Props

| Name | Type | Default | Description | | --------------- | -------- | -------------------------------- | ------------------------------------------------------- | | children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. | | width | string | | The width of the component. | | background | string | #ffffff | The background of the component. | | rounded | string | 5px | Rounded corners. | | margin | string | auto | The margin of the component. | | padding | string | 20px | The padding of the component. | | shadow | string | 0 4px 10px rgba(0, 0, 0, 0.07) | The values of the box-shadow. 0px to disable. | | flexDirection | string | row | This establishes the main-axis. Values: row | row-reverse | column | column-reverse | justifyContent | string | start | This defines the alignment along the main axis. Values: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right| unsafe|

Usage

import { Card } from 'feather-react-components'

render() {
  <Card flexDirection="column" width="300px">
    // your content
  </Card>
}

Text

Go to components

Props

| Name | Type | Default | Description | | --------------- | -------- | --------- | ------------------------------------------------------- | | children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. | | fontFamily | string | Roboto | defines the font that is applied to the text. | | fontSize | string | 18px | Specifies the size, or height, of the text. | | fontWeigth | string | 400 | Sets the weight, or thickness, of the text. | | color | string | #000000 | Define the color of the component. | | variant | string | | Applies the theme typography styles. Values: h1 | h2 | h3 | h4 | h5 | h6 | subtitle1 | subtitle2 | body1 | body2 | caption | overline |

Usage

import { Text } from 'feather-react-components'

render() {
  <Text>
    // your content
  </Text>

  <Text variant="h1">h1. Heading</Text>

  <Text variant="h2">h2. Heading</Text>

  <Text variant="h3">h3. Heading</Text>

  <Text variant="h4">h4. Heading</Text>

  <Text variant="h5">h5. Heading</Text>

  <Text variant="h6">h6. Heading</Text>

  <Text variant="subtitle1">
    subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Quos blanditiis tenetur
  </Text>

  <Text variant="subtitle2">
    subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Quos blanditiis tenetur
  </Text>

  <Text variant="body1">
    body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
    blanditiis tenetur unde suscipit, quam beatae rerum inventore
    consectetur, neque doloribus, cupiditate numquam dignissimos laborum
    fugiat deleniti? Eum quasi quidem quibusdam.
  </Text>

  <Text variant="body2">
    body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
    blanditiis tenetur unde suscipit, quam beatae rerum inventore
    consectetur, neque doloribus, cupiditate numquam dignissimos laborum
    fugiat deleniti? Eum quasi quidem quibusdam.
  </Text>

  <Text variant="caption">caption text</Text>

  <Text variant="OVERLINE">Overline Text</Text>
}

Container

Go to components

Props

| Name | Type | Default | Description | | --------------- | -------- | -------- | ------------------------------------------------------- | | children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. | | maxWidth | string | 920px | Used to set the maximum width of the container. | | padding | string | 0 18px | defines the innermost portion of the container. |

Usage

import { Container } from 'feather-react-components'

render() {
  <Container>
    // your content
  </Container>
}

Spacer

Go to components

Props

| Name | Type | Default | Description | | --------------- | -------- | ------- | ----------------------------- | | children | node | | The content of the component. | | width | string | | The width of the component. | | height | string | | The height of the component. |

Usage

import { Spacer } from 'feather-react-components'

render() {
  <Spacer height="20px" />
}

Avatar

Go to components

Props

| Name | Type | Default | Description | | --------------- | -------- | ------- | ------------------------------------------------------------------ | | children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. | | width | string | 100px | The width of the component. | | height | string | 100px | The height of the component. | | rounded | string | 5px | Rounded corners. | | margin | string | 18px | The margin of the component. | | background | string | | The background of the component, if you don't want to use a image. | | image | string | | The Image of the avatar. |

Usage

import { Avatar } from 'feather-react-components'

render() {
  <Avatar background="#08B1C5" margin="auto" />
}

Button

Go to components

Props

| Name | Type | Default | Description | | ----------------- | -------- | ---------- | ---------------------------------------------------- | | children | node | | The content of the button. | | classes | object | | Override or extend the styles applied to the button. | | disable | bool | | Sets the state of the button. | | width | string | 100% | The width of the button. | | height | string | 48px | The height of the button. | | rounded | string | 5px | Rounded corners. | | background | string | #000000 | The background of the button. | | disableBackground | string | #666666 | The background of the button when is disable. | | color | string | #ffffff | Define the color of the component. | | disableColor | string | | The background of the button when is disable. | | margin | string | | The margin of the button. | | padding | string | | The padding of the component. | | fontSize | string | 0.875rem | Specifies the size, or height, of the text. | | fontWeigth | string | | Sets the weight, or thickness, of the text. | | onClick | func | | Sets function of the handlerClick. |

Usage

import { Button } from 'feather-react-components'

render() {
  <Button
    background="#08B1C5"
    margin="20px 0"
    onClick={() => console.log('Hello 💃🏼')}
  >
    Hello 💃🏼
  </Button>
}

ImageContainer

Go to components

Props

| Name | Type | Default | Description | | ---------- | -------- | ------- | ---------------------------------------------------- | | children | node | | The content of the button. | | classes | object | | Override or extend the styles applied to the button. | | width | string | 100px | The width of the button. | | height | string | 100px | The height of the button. | | image | string | | The background of the component. |

Usage

import { ImageContainer } from 'feather-react-components'

render() {
  <ImageContainer
    image={/* url or path */}
    width="400px"
    height="300px"
  />
}

License

MIT © F34th3R