https://github.com/quran/common-components

Common components to be used across Quran.com, Quranicaudio.com and Salah.com
https://github.com/quran/common-components

quran storybook

Last synced: about 1 month ago
JSON representation

Common components to be used across Quran.com, Quranicaudio.com and Salah.com

• Host: GitHub
• URL: https://github.com/quran/common-components
• Owner: quran
• Created: 2017-02-24T06:42:31.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-14T22:16:39.000Z (over 6 years ago)
• Last Synced: 2024-11-01T10:46:29.002Z (about 2 months ago)
• Topics: quran, storybook
• Language: JavaScript
• Homepage: https://quran.github.io/common-components
• Size: 2.85 MB
• Stars: 41
• Watchers: 16
• Forks: 19
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# [Quran Components](https://quran.github.io/common-components/#/) [![CircleCI](https://circleci.com/gh/quran/common-components.svg?style=svg)](https://circleci.com/gh/quran/common-components) [![npm version](https://badge.fury.io/js/quran-components.svg)](https://www.npmjs.com/package/quran-components) [![NPM](https://img.shields.io/npm/dm/quran-components.svg?style=flat-square)](https://www.npmjs.com/package/quran-components) [![NPM](http://i.imgur.com/Lk5HsBo.png)](https://quranslack.herokuapp.com)

> Quran Common Components are a set of React UI components. The aim is to promote a consistent and reusable component library. 

## Installation

#### NPM

> `npm install --save quran-components`

#### YARN

> `yarn add quran-components`

## Usage

#### ES6

```js 

import React from 'React';

import { Button, Jumbotron } from 'quran-components';

const CustomBody = () => (

  


    

    

  

);

```


Also to reduce file size, you can require individual components:

```js

import React from 'React';

import Button from 'quran-components/lib/Button';

const MyButton = () => (

  


    

  

);

```


#### ES5

```js

var React = require('react');

var component = require('quran-components');

var Button = component.Button;

var MyButton = React.createClass({

  render: function() {

    return (

      


        

      


    );

  }

});

```


##### [Demo](https://quran.github.io/common-components/)