Feather-react-components NPM

feather-react-components

My most used components 💃🏼📦

Install

npm i feather-react-components

Components

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	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

@everything-registry/sub-chunk-1655 @zalastax/nolb-fea @infinitebrahmanuniverse/nolb-fea

1.0.1

4 years ago

1.0.0

4 years ago