Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

indoqa-rebass-components

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

indoqa-rebass-components

A collection of additional rebass components:

  • 0.2.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

Indoqa Rebass Components

A collection of additional rebass components:

  • <List> and <ListItem>: Ordered and unordered lists with default padding/margin settings and configurable listStyleType.
  • <Anchor /> and <AnchorLink />: Jump to anchors on the same page.
  • <FontAwesome />: FontAwesome icons with configurable color and size.
  • <Div /> and <Span />: Simple div/span components with the benefits of withRebass()

Live Demo

see https://indoqa.github.io/indoqa-rebass-components/

Usage

Lists

import React from 'react'
import {Space} from 'rebass'
import {Div, List, ListItem} from 'indoqa-rebass-components'

const ListExample = () => (
  <Div>
    <List>
      <ListItem> item 1 </ListItem>
      <ListItem> item 2 </ListItem>
      <ListItem> item 3 </ListItem>
      <ListItem> item 4 </ListItem>
    </List>
    <Space y={1} />
    <List itemType="circle">
      <ListItem> item 1 </ListItem>
      <ListItem> item 2 </ListItem>
      <ListItem> item 3 </ListItem>
      <ListItem> item 4 </ListItem>
    </List>
    <Space y={1} />
    <List ordered>
      <ListItem> item 1 </ListItem>
      <ListItem> item 2 </ListItem>
      <ListItem> item 3 </ListItem>
      <ListItem> item 4 </ListItem>
    </List>
    <Space y={1} />
    <List ordered itemType="lower-alpha">
      <ListItem> item 1 </ListItem>
      <ListItem> item 2 </ListItem>
      <ListItem> item 3 </ListItem>
      <ListItem> item 4 </ListItem>
    </List>
  </Div>
)

export default ListExample
import React from 'react'
import {Anchor. AnchorLink, Div} from 'indoqa-rebass-components'

const Page = () => (
  <Div>
    <AnchorLink to="section2"> Jump to section 2 </AnchorLink>
    .......
    .......
    .......
    <Anchor id="section2"/>
    Here starts section 2!
  </Div>
)

export default Page

FontAwesome

import React from 'react'
import {FontAwesome} from 'indoqa-rebass-components'

import 'font-awesome/css/font-awesome.css'

const ThumbsUpBigRedIcon = () => (
  <FontAwesome icon="thumbs-o-up" color="red" size="30px" />
)

export default ThumbsUpBigRedIcon

Note: The font-awesome css is treated as optional provided dependency. It is not included in indoqa-rebass-components. Use npm package 'font-awesome' in your app.

Playground

Play around with our live demo locally:

git clone git@github.com:Indoqa/indoqa-rebass-components.git
cd indoqa-rebass-components
npm install
npm start

Point your browser to http://localhost:3000 and edit pages in src/playground. Hot reloading is enabled by default.

Keywords

FAQs

Package last updated on 18 Oct 2016

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc