pampa-react v0.1.6

Pampa React

Library of React components, cleaner and customizable. Focus in a clean layout and open spaces. All components use styled-components so you can use all them tools.

Alert

A little pop-up alert box to display info to the user, like success actions or errors.

const [alert, setAlert] = useState(true);

<Alert open={alert} close={() => setAlert(!alert)} delay={5000} variant='success'>
  <Alert.Message>¡Success message!</Alert.Message>
</Alert>

<Alert.Message>

Box

A frame with a border, you can use it for cards, list or any component that you want to have a border in line with the other styles.

<Box>
  {children}
</Box>

Button

There is a bounch of diferent buttons in the package, here is a little example.

/* Common type */
<Button>Do Something</Button>

/* Filled variant */
<Button filled>Filled</Button>

/* Like the Alert, you can use a variant */
<Button variant='warning' filled>Delete Item</Button>

/* There is a option for icons (you need to add the icons link from google fonts), so you can style all the icons in the app in the same way */
<Button.Icon>arrow_back</Button.Icon>

Card

Simple card component with the posibility of customize the content.

<Card>
  <Card.Media src='imgs/some-img.jpg' />
  <Card.Header>
    <Text component='h4' type={500}>Card Title</Text>
    <Text component='h5'>Card Subtitle</Text>
  </Card.Header>
  <Card.Content>
    <Text component='p'>Some description</Text>
  </Card.Content>
  <Card.Actions>
    <Button>See Detail</Button>
    <Button variant='error'>Delete from cart</Button>
  </Card.Actions>
</Card>

<Card.Media/>

Display a img in the component.

<Card.Header/>

This is a wrapper div to determinate a section in a card.

<Card.Content/>

This is a wrapper div to determinate a section in a card.

<Card.Actions/>

This is a wrapper div to determinate a section in a card.

Gallery

A full screen gallery to see imgs or any other content in detail. The component create a new portal to mount this.

const [gallery, setGallery] = useState(true);

<Gallery open={gallery} items={5} index={0}>
  <Gallery.Close onClick={() => setGallery(!gallery)}>close</Gallery.Close>
  <Gallery.Slider>
    {arrayOfImages.map((img, index) => 
      <Gallery.Slide key={index} slide={index}>
        <Image src={img} />
      </Gallery.Slide>
    )}
  </Gallery.Slider>
  <Gallery.Info>
    <Gallery.Prev>arrow_back</Gallery.Prev>
    <Gallery.Next>arrow_forward</Gallery.Next>
  </Gallery.Info>
</Gallery>

<Gallery.Slider/>

This is a wrapper for all the Slide.

<Gallery.Slide/>

This component wrap all the info that you wanna show in any card.

<Gallery.Info/>

Display the position and the total of slides.

<Gallery.Close/>

With this button you can trigger the close of the gallery.

<Gallery.Prev/>

With this button you can trigger the prev slide of the gallery.

<Gallery.Next/>

With this button you can trigger the next slide of the gallery.

Image

A component for imgs to use in any component and have matching styles. It have the same props that any <img/> HTML tag

Alternatively you can import LazyLoad from the Image file, to use a lazy-load image.

Input

A input component with styles for validation.

/* You can use the input tag alone or with the container to use the custom styles for add in validations */

let error = false;
let valid = true;
let errorMessage = false;

<Input.Container error={error} valid={valid}>
  <Input id='name' name='name' placeholder='insert your name' />
  <Input.Message show={errorMessage}>The name is requerided</Input.Message>
</Input.Container>

<Input id='name' name='name' placeholder='insert your name' />

<Input.Container/>

<Input.Message/>

List

A big list to display content.

<List>
  <Item>
    <Item.Label>
      <Text type={300}>Package creator</Text>
    </Item.Label>
    <Item.Content>
      <Text type={600}>Juan Stroman Ilz</Text>
    </Item.Content>
  </Item>
  <Item>
    <Item.Label>
      <Text type={300}>First version release</Text>
    </Item.Label>
    <Item.Content>
      <Text type={600}>2021</Text>
    </Item.Content>
  </Item>
  <Item>
    <Item.Label>
      <Text type={300}>Framework</Text>
    </Item.Label>
    <Item.Content>
      <Text type={600}>React.js</Text>
    </Item.Content>
  </Item>
</List>

/* Here in combination with Box */

<Box>
  <List>
    <Item>
      <Item.Label>
        <Text type={300}>Package creator</Text>
      </Item.Label>
      <Item.Content>
        <Text type={600}>Juan Stroman Ilz</Text>
      </Item.Content>
    </Item>
    <Item>
      <Item.Label>
        <Text type={300}>First version release</Text>
      </Item.Label>
      <Item.Content>
        <Text type={600}>2021</Text>
      </Item.Content>
    </Item>
    <Item>
      <Item.Label>
        <Text type={300}>Framework</Text>
      </Item.Label>
      <Item.Content>
        <Text type={600}>React.js</Text>
      </Item.Content>
    </Item>
  </List>
</Box>

<Item.Label/>

<Item.Content/>

Modal

Create a modal pop-up. The component create a new portal to mount this.

const [open, setOpen] = useState(true);

<Modal open={open} close={() => setOpen(!open)}>
  <Modal.Title>Delete item</Modal.Title>
  <Modal.Content>This action can't be undone.</Modal.Content>
  <Modal.Actions>
    <Button filled onClick={() => setOpen(!open)}>Close</Button>
    <Button filled variant='error' onClick={deleteItem}>Delete</Button>
  </Modal.Actions>
</Modal>

<Modal.Title/>

The title of the modal.

<Modal.Content/>

The content of the modal.

<Modal.Actions/>

The wrapper for the actions of the modal.

Tag

A component to list details or hashtags.

<Tag>
  <Text type={300}>React</Text>
</Tag>

/* or */

<Tag>
  <a href='/somewhere'>external detail</a>
</Tag>

Text

A component to control typography and match styles in the app.

<Text type={700}>Title</Text>

ThemeProvider

You need to wrap the app root with this theme provider, to access to the default theme. This is extension of the styled-components ThemeProvider, if you want to overrite the defaul theme pass a theme to the component.