Socket
Socket
Sign inDemoInstall

react-script

Package Overview
Dependencies
0
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-script

Elegant DSL for React


Version published
Weekly downloads
6.8K
increased by0.95%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

ReactScript

An elegant, flexible DSL for React for use with CoffeeScript (and maybe other languages)

With CoffeeScript:

# Alias it as whatever you want (maybe _ or $?)
E = ReactScript or require "react-script"

class Message extends React.Component
	render: ->
		E ".message", class: (if @props.author is you then "from-you"),
			E ".info",
				style: float: "right"
				"From "
				E "span.author", @props.author
				" at "
				E "span.time", @props.time
			E "p.body",
				@props.text
				if @props.fileTransfers
					E ".transfers",
						"Sent files:"
						E "ul.files",
							for transfer in @props.fileTransfers
								E "li", E "a",
									href: transfer.downloadLink
									download: transfer.fileName
									transfer.fileName

message = E Message,
	author: "John"
	time: "5:47 PM"
	text: "Hello world!"
	fileTransfers: [
		{fileName:  "virus.exe", downloadLink: "#"}
	]

ReactDOM.render message, document.body

By simply supporting arrays and ignoring nully values, it works with all forms of conditionals and comprehensions.

All the functionality of classnames is built in. Just provide any class, classes, className, classNames or classList. All those properties are treated the same and can be a single class name, a single string with multiple class names, an object where the keys are the class names and the values are whether they should be present, or an array of any of the preceding. Nully values are ignored, allowing for conditionals.

The whole library tries to be pretty flexible.

You can specify data-* and aria-* properties either as e.g. "data-size"/"aria-pressed" or dataSize/ariaPressed or data_size/aria_pressed or data: size: 1.337/aria: pressed: true. (ARIA's role attribute is just role.)

Check out the specs for more details.

If you find something that doesn't work as you'd hope, feel free to open an issue.

Installation

npm i react-script --save

Usage

You can use ReactScript through a bundler like browserify or webpack, or you can include it as a script:

<script src="node_modules/react-script/lib/react-script.js"></script>`

Then alias ReactScript as something short such as E to use as a DSL.

var E = ReactScript; // or require("react-script");

Run tests

npm test

Similar Projects

Keywords

FAQs

Last updated on 19 Jul 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

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc